@font-face {
  font-family: "iconfont";
  src: url("./iconfont-da649bc1.ttf") format("truetype");
}
@font-face {
  font-family: "title";
  src: url("./title-ef7f420c.ttf") format("truetype");
}
@font-face {
  font-family: "equipmentIcon";
  src: url("https://at.alicdn.com/t/c/font_3935065_vcdwl9s879r.woff2?t=1663693441570") format("woff2");
}
@font-face {
  font-family: "skillIcon"; /* Project id 4249221 */
  src: url("https://at.alicdn.com/t/c/font_4249221_yza1c6r5z3.woff2?t=1694552658152") format("woff2"), url("https://at.alicdn.com/t/c/font_4249221_600rs2cobnm.woff?t=1694552658152") format("woff"), url("https://at.alicdn.com/t/c/font_4249221_600rs2cobnm.ttf?t=1694552658152") format("truetype");
}
@font-face {
  font-family: "petIcon";
  /* Project id 3656453 */
  src: url("https://at.alicdn.com/t/c/font_3969371_etwbzixslj.woff2?t=1663563488135") format("woff2"), url("https://at.alicdn.com/t/c/font_3969371_foy081xruxa.woff?t=1663563488135") format("woff"), url("https://at.alicdn.com/t/c/font_3969371_foy081xruxa.ttf?t=1663563488135") format("truetype");
}
@font-face {
  font-family: "monsterIcon";
  /* Project id 3661046 */
  src: url("https://at.alicdn.com/t/c/font_4024821_jsxlo7favlj.woff2?t=1663693441570") format("woff2"), url("https://at.alicdn.com/t/c/font_4024821_8st09qfq7ae.woff?t=1663693441570") format("woff"), url("https://at.alicdn.com/t/c/font_4024821_8st09qfq7ae.ttf?t=1663693441570") format("truetype");
}
@font-face {
  font-family: "cardIcon";
  /* Project id 3656453 */
  src: url("https://at.alicdn.com/t/c/font_4077561_fsr82gwlvvj.woff2?t=1663563488135") format("woff2"), url("https://at.alicdn.com/t/c/font_4077561_h5r30utoc4c.woff?t=1663563488135") format("woff"), url("https://at.alicdn.com/t/c/font_4077561_h5r30utoc4c.ttf?t=1663563488135") format("truetype");
}.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.flex-col {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}

.flex-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.flex-hcenter {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.flex-vcenter {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.flex-col-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.flex-col-hcenter {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.flex-col-vcenter {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.flex,
.flex-col,
.flex-center,
.flex-hcenter,
.flex-vcenter,
.flex-col-center,
.flex-col-hcenter,
.flex-col-vcenter {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
          flex: 0 1 auto;
}
.flex.inline-flex,
.flex-col.inline-flex,
.flex-center.inline-flex,
.flex-hcenter.inline-flex,
.flex-vcenter.inline-flex,
.flex-col-center.inline-flex,
.flex-col-hcenter.inline-flex,
.flex-col-vcenter.inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.flex.wrap,
.flex-col.wrap,
.flex-center.wrap,
.flex-hcenter.wrap,
.flex-vcenter.wrap,
.flex-col-center.wrap,
.flex-col-hcenter.wrap,
.flex-col-vcenter.wrap {
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-content: flex-start;
          align-content: flex-start;
}
.flex.wrap-reverse,
.flex-col.wrap-reverse,
.flex-center.wrap-reverse,
.flex-hcenter.wrap-reverse,
.flex-vcenter.wrap-reverse,
.flex-col-center.wrap-reverse,
.flex-col-hcenter.wrap-reverse,
.flex-col-vcenter.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
}
.flex.d-row-reverse,
.flex-col.d-row-reverse,
.flex-center.d-row-reverse,
.flex-hcenter.d-row-reverse,
.flex-vcenter.d-row-reverse,
.flex-col-center.d-row-reverse,
.flex-col-hcenter.d-row-reverse,
.flex-col-vcenter.d-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.flex.d-col-reverse,
.flex-col.d-col-reverse,
.flex-center.d-col-reverse,
.flex-hcenter.d-col-reverse,
.flex-vcenter.d-col-reverse,
.flex-col-center.d-col-reverse,
.flex-col-hcenter.d-col-reverse,
.flex-col-vcenter.d-col-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.flex.d-column,
.flex-col.d-column,
.flex-center.d-column,
.flex-hcenter.d-column,
.flex-vcenter.d-column,
.flex-col-center.d-column,
.flex-col-hcenter.d-column,
.flex-col-vcenter.d-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.flex.jc-start,
.flex-col.jc-start,
.flex-center.jc-start,
.flex-hcenter.jc-start,
.flex-vcenter.jc-start,
.flex-col-center.jc-start,
.flex-col-hcenter.jc-start,
.flex-col-vcenter.jc-start {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
.flex.jc-center,
.flex-col.jc-center,
.flex-center.jc-center,
.flex-hcenter.jc-center,
.flex-vcenter.jc-center,
.flex-col-center.jc-center,
.flex-col-hcenter.jc-center,
.flex-col-vcenter.jc-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.flex.jc-end,
.flex-col.jc-end,
.flex-center.jc-end,
.flex-hcenter.jc-end,
.flex-vcenter.jc-end,
.flex-col-center.jc-end,
.flex-col-hcenter.jc-end,
.flex-col-vcenter.jc-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.flex.jc-around,
.flex-col.jc-around,
.flex-center.jc-around,
.flex-hcenter.jc-around,
.flex-vcenter.jc-around,
.flex-col-center.jc-around,
.flex-col-hcenter.jc-around,
.flex-col-vcenter.jc-around {
  -webkit-justify-content: space-around;
          justify-content: space-around;
}
.flex.jc-between,
.flex-col.jc-between,
.flex-center.jc-between,
.flex-hcenter.jc-between,
.flex-vcenter.jc-between,
.flex-col-center.jc-between,
.flex-col-hcenter.jc-between,
.flex-col-vcenter.jc-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.flex.ai-start,
.flex-col.ai-start,
.flex-center.ai-start,
.flex-hcenter.ai-start,
.flex-vcenter.ai-start,
.flex-col-center.ai-start,
.flex-col-hcenter.ai-start,
.flex-col-vcenter.ai-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.flex.ai-center,
.flex-col.ai-center,
.flex-center.ai-center,
.flex-hcenter.ai-center,
.flex-vcenter.ai-center,
.flex-col-center.ai-center,
.flex-col-hcenter.ai-center,
.flex-col-vcenter.ai-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.flex.ai-end,
.flex-col.ai-end,
.flex-center.ai-end,
.flex-hcenter.ai-end,
.flex-vcenter.ai-end,
.flex-col-center.ai-end,
.flex-col-hcenter.ai-end,
.flex-col-vcenter.ai-end {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
          align-items: flex-end;
}
.flex.ai-baseline,
.flex-col.ai-baseline,
.flex-center.ai-baseline,
.flex-hcenter.ai-baseline,
.flex-vcenter.ai-baseline,
.flex-col-center.ai-baseline,
.flex-col-hcenter.ai-baseline,
.flex-col-vcenter.ai-baseline {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
          align-items: baseline;
}
.flex.ai-stretch,
.flex-col.ai-stretch,
.flex-center.ai-stretch,
.flex-hcenter.ai-stretch,
.flex-vcenter.ai-stretch,
.flex-col-center.ai-stretch,
.flex-col-hcenter.ai-stretch,
.flex-col-vcenter.ai-stretch {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
}
.flex.ac-start,
.flex-col.ac-start,
.flex-center.ac-start,
.flex-hcenter.ac-start,
.flex-vcenter.ac-start,
.flex-col-center.ac-start,
.flex-col-hcenter.ac-start,
.flex-col-vcenter.ac-start {
  -webkit-align-content: flex-start;
          align-content: flex-start;
}
.flex.ac-center,
.flex-col.ac-center,
.flex-center.ac-center,
.flex-hcenter.ac-center,
.flex-vcenter.ac-center,
.flex-col-center.ac-center,
.flex-col-hcenter.ac-center,
.flex-col-vcenter.ac-center {
  -webkit-align-content: center;
          align-content: center;
}
.flex.ac-end,
.flex-col.ac-end,
.flex-center.ac-end,
.flex-hcenter.ac-end,
.flex-vcenter.ac-end,
.flex-col-center.ac-end,
.flex-col-hcenter.ac-end,
.flex-col-vcenter.ac-end {
  -webkit-align-content: flex-end;
          align-content: flex-end;
}
.flex.ac-around,
.flex-col.ac-around,
.flex-center.ac-around,
.flex-hcenter.ac-around,
.flex-vcenter.ac-around,
.flex-col-center.ac-around,
.flex-col-hcenter.ac-around,
.flex-col-vcenter.ac-around {
  -webkit-align-content: space-around;
          align-content: space-around;
}
.flex.ac-between,
.flex-col.ac-between,
.flex-center.ac-between,
.flex-hcenter.ac-between,
.flex-vcenter.ac-between,
.flex-col-center.ac-between,
.flex-col-hcenter.ac-between,
.flex-col-vcenter.ac-between {
  -webkit-align-content: space-between;
          align-content: space-between;
}

.flex-g-1 {
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
          flex-basis: 0;
  max-width: 100%;
}

.flex-g-2 {
  box-sizing: border-box;
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
          flex-grow: 2;
  -webkit-flex-basis: 0;
          flex-basis: 0;
}

.flex-g-3 {
  box-sizing: border-box;
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
          flex-grow: 3;
  -webkit-flex-basis: 0;
          flex-basis: 0;
}

.flex-g-4 {
  box-sizing: border-box;
  -webkit-box-flex: 4;
  -webkit-flex-grow: 4;
          flex-grow: 4;
  -webkit-flex-basis: 0;
          flex-basis: 0;
}

.flex-g-5 {
  box-sizing: border-box;
  -webkit-box-flex: 5;
  -webkit-flex-grow: 5;
          flex-grow: 5;
  -webkit-flex-basis: 0;
          flex-basis: 0;
}

.flex-col-1,
.flex-col-10,
.flex-col-11,
.flex-col-12,
.flex-col-2,
.flex-col-3,
.flex-col-4,
.flex-col-5,
.flex-col-6,
.flex-col-7,
.flex-col-8,
.flex-col-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
}

.flex-col-1 {
  -webkit-flex-basis: 8.333%;
          flex-basis: 8.333%;
  width: 8.333%;
}

.flex-col-2 {
  -webkit-flex-basis: 16.667%;
          flex-basis: 16.667%;
  width: 16.667%;
}

.flex-col-3 {
  -webkit-flex-basis: 25%;
          flex-basis: 25%;
  width: 25%;
}

.flex-col-4 {
  -webkit-flex-basis: 33.333%;
          flex-basis: 33.333%;
  width: 33.333%;
}

.flex-col-5 {
  -webkit-flex-basis: 41.667%;
          flex-basis: 41.667%;
  width: 41.667%;
}

.flex-col-6 {
  -webkit-flex-basis: 50%;
          flex-basis: 50%;
  width: 50%;
}

.flex-col-7 {
  -webkit-flex-basis: 58.333%;
          flex-basis: 58.333%;
  width: 58.333%;
}

.flex-col-8 {
  -webkit-flex-basis: 66.667%;
          flex-basis: 66.667%;
  width: 66.667%;
}

.flex-col-9 {
  -webkit-flex-basis: 75%;
          flex-basis: 75%;
  width: 75%;
}

.flex-col-10 {
  -webkit-flex-basis: 83.333%;
          flex-basis: 83.333%;
  width: 83.333%;
}

.flex-col-11 {
  -webkit-flex-basis: 91.667%;
          flex-basis: 91.667%;
  width: 91.667%;
}

.flex-col-12 {
  -webkit-flex-basis: 100%;
          flex-basis: 100%;
  width: 100%;
}

.flex-col-offset-1 {
  margin-left: 8.333%;
}

.flex-col-offset-2 {
  margin-left: 16.667%;
}

.flex-col-offset-3 {
  margin-left: 25%;
}

.flex-col-offset-4 {
  margin-left: 33.333%;
}

.flex-col-offset-5 {
  margin-left: 41.667%;
}

.flex-col-offset-6 {
  margin-left: 50%;
}

.flex-col-offset-7 {
  margin-left: 58.333%;
}

.flex-col-offset-8 {
  margin-left: 66.667%;
}

.flex-col-offset-9 {
  margin-left: 75%;
}

.flex-col-offset-10 {
  margin-left: 83.333%;
}

.flex-col-offset-11 {
  margin-left: 91.667%;
}.mt5 {
  margin-top: 0.05rem !important;
}

.mt10 {
  margin-top: 0.1rem !important;
}

.mt15 {
  margin-top: 0.15rem !important;
}

.mt20 {
  margin-top: 0.2rem !important;
}

.mb5 {
  margin-bottom: 0.05rem !important;
}

.mb10 {
  margin-bottom: 0.1rem !important;
}

.mb15 {
  margin-bottom: 0.15rem !important;
}

.mb20 {
  margin-bottom: 0.2rem !important;
}

.ml5 {
  margin-left: 0.05rem !important;
}

.ml10 {
  margin-left: 0.1rem !important;
}

.ml15 {
  margin-left: 0.15rem !important;
}

.ml20 {
  margin-left: 0.2rem !important;
}

.mr5 {
  margin-right: 0.05rem !important;
}

.mr10 {
  margin-right: 0.1rem !important;
}

.mr15 {
  margin-right: 0.15rem !important;
}

.mr20 {
  margin-right: 0.2rem !important;
}

.m5 {
  margin: 0.05rem !important;
}

.m10 {
  margin: 0.1rem !important;
}

.m15 {
  margin: 0.15rem;
}

.pt5 {
  padding-top: 0.05rem;
}

.pt10 {
  padding-top: 0.1rem;
}

.pb5 {
  padding-bottom: 0.05rem;
}

.pb10 {
  padding-bottom: 0.1rem;
}

.pl5 {
  padding-left: 0.05rem;
}

.pl10 {
  padding-left: 0.1rem;
}

.pr5 {
  padding-right: 0.05rem;
}

.pr10 {
  padding-right: 0.1rem;
}

.p5 {
  padding: 0.05rem;
}

.f18 {
  font-size: 0.18rem !important;
}

.f20 {
  font-size: 0.2rem !important;
}

.f22 {
  font-size: 0.22rem !important;
}

.f24 {
  font-size: 0.24rem !important;
}

.f26 {
  font-size: 0.26rem !important;
}

.f28 {
  font-size: 0.28rem !important;
}

.f30 {
  font-size: 0.3rem !important;
}

.f32 {
  font-size: 0.32rem !important;
}

.f34 {
  font-size: 0.34rem !important;
}

.f36 {
  font-size: 0.36rem !important;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.v-hidden {
  visibility: hidden;
}

.d-none,
.hide,
.hidden {
  display: none !important;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-0 {
  border-radius: 0;
}

.border-0 {
  border: 0 !important;
}

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.w-100 {
  width: 100% !important;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-justify {
  text-align: justify !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-normal {
  font-weight: normal;
}

.font-weight-bold {
  font-weight: bold;
}

.font-italic {
  font-style: italic;
}

.text-white {
  color: #fff !important;
}

.rotateY {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.rotateX {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.margin-auto {
  margin: 0 auto;
}

.ml-auto {
  margin-left: auto !important;
}

.box-shadow-white {
  box-shadow: 0 0.06rem 0.1rem 0 rgba(255, 255, 255, .2), 0 -0.06rem 0.1rem 0 rgba(255, 255, 255, .2), 0.06rem 0 0.1rem 0 rgba(255, 255, 255, .2), -0.06rem 0 0.1rem 0 rgba(255, 255, 255, .2);
}
.box-shadow-white:active {
  box-shadow: 0 0 0 #fff;
}

.box-shadow-black {
  box-shadow: 0 0.06rem 0.1rem 0 rgba(0, 0, 0, .2), 0 -0.06rem 0.1rem 0 rgba(0, 0, 0, .2), 0.06rem 0 0.1rem 0 rgba(0, 0, 0, .2), -0.06rem 0 0.1rem 0 rgba(0, 0, 0, .2);
}
.box-shadow-black:active {
  box-shadow: 0 0 0 #fff;
  opacity: 0.8;
}

.box-shadow-red {
  box-shadow: 0 0.06rem 0.1rem 0 rgba(255, 0, 0, .2), 0 -0.06rem 0.1rem 0 rgba(255, 0, 0, .2), 0.06rem 0 0.1rem 0 rgba(255, 0, 0, .2), -0.06rem 0 0.1rem 0 rgba(255, 0, 0, .2);
}
.box-shadow-red:active {
  box-shadow: 0 0 0 #fff;
  opacity: 0.8;
}

.children-full {
  position: relative;
  overflow: hidden;
}
.children-full > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.children-full-noHid {
  position: relative;
}
.children-full-noHid > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.scroll-absolute {
  position: relative;
  overflow: hidden;
}
.scroll-absolute > div:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.bg-red {
  background-color: #e54d42;
  color: #ffffff;
}

.bg-orange {
  background-color: #f37b1d;
  color: #ffffff;
}

.bg-yellow {
  background-color: #fbbd08;
  color: #333333;
}

.bg-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.bg-green {
  background-color: #39b54a;
  color: #ffffff;
}

.bg-cyan {
  background-color: #1cbbb4;
  color: #ffffff;
}

.bg-blue {
  background-color: #0081ff;
  color: #ffffff;
}

.bg-purple {
  background-color: #6739b6;
  color: #ffffff;
}

.bg-mauve {
  background-color: #9c26b0;
  color: #ffffff;
}

.bg-pink {
  background-color: #e03997;
  color: #ffffff;
}

.bg-brown {
  background-color: #a5673f;
  color: #ffffff;
}

.bg-grey {
  background-color: #8799a3;
  color: #ffffff;
}

.bg-gray {
  background-color: #f0f0f0;
  color: #333333;
}

.bg-black {
  background-color: #333333;
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
  color: #666666;
}

.text-red,
.line-red,
.lines-red {
  color: #e54d42 !important;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #f37b1d !important;
}

.text-yellow,
.line-yellow,
.lines-yellow {
  color: #fbbd08 !important;
}

.text-olive,
.line-olive,
.lines-olive {
  color: #8dc63f !important;
}

.text-green,
.line-green,
.lines-green {
  color: #39b54a !important;
}

.text-cyan,
.line-cyan,
.lines-cyan {
  color: #1cbbb4 !important;
}

.text-blue,
.line-blue,
.lines-blue {
  color: #0081ff !important;
}

.text-purple,
.line-purple,
.lines-purple {
  color: #6739b6 !important;
}

.text-mauve,
.line-mauve,
.lines-mauve {
  color: #9c26b0 !important;
}

.text-pink,
.line-pink,
.lines-pink {
  color: #e03997 !important;
}

.text-brown,
.line-brown,
.lines-brown {
  color: #a5673f !important;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #8799a3 !important;
}

.text-gray,
.line-gray,
.lines-gray {
  color: #aaaaaa !important;
}

.text-black,
.line-black,
.lines-black {
  color: #333333 !important;
}

.text-black2 {
  color: #585858 !important;
}

.text-white,
.line-white,
.lines-white {
  color: #ffffff !important;
}

.text-white2 {
  color: #eee5e5 !important;
}html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0.26rem;
  overflow: hidden;
  margin: 0 auto;
  background-color: #000000;
  font-family: iconfont, gamefont, fzcysongbackup;
}

input {
  font-family: iconfont, gamefont, fzcysongbackup;
}

.petIcon {
  font-family: "petIcon";
}

.monsterIcon {
  font-family: "monsterIcon";
}

.skillIcon {
  font-family: "skillIcon";
}

div {
  box-sizing: border-box;
}

var {
  color: rgb(13, 70, 175);
  font-style: normal;
}

#app,
#index {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#index {
  color: #ffffff;
  background-color: #1E1E1E;
}

.indexContent {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 4;
}

p {
  margin: 0;
  -o-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}

div {
  -o-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font-family: fzcysong, fzcysongbackup;
}

.cheatBtn {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  width: 0.8rem;
  height: 0.5rem;
  color: #fff;
  font-size: 0.2rem;
  z-index: 10;
}

#messageTip .messageTipWrap {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .6);
  z-index: 999;
}
#messageTip .messageTipContent {
  padding: 0.2rem 0.3rem;
  border-radius: 0.1rem;
  color: #a1dce2;
  background-color: #000000;
  box-shadow: 0.05rem 0.05rem 0.15rem #0e0606, -0.05rem -0.05rem 0.15rem #0a0101;
  max-height: 12rem;
  overflow: auto;
}

.scene {
  position: absolute;
  z-index: 0;
  -webkit-transform: scale(2.5) translate(-0.8rem, 1rem);
          transform: scale(2.5) translate(-0.8rem, 1rem);
}
.scene .blob-1 path {
  fill: url(#gradient-1);
}
.scene .blob-2 path {
  fill: url(#gradient-2);
}
.scene .blob-3 path {
  fill: url(#gradient-3);
}
.scene .blob-4 path {
  fill: url(#gradient-4);
}
.scene .blob-5 path {
  fill: url(#gradient-5);
}
.scene .blob-6 path {
  fill: url(#gradient-6);
}
.scene path:first-of-type {
  fill-opacity: 0.1;
}
.scene path:nth-of-type(2) {
  fill-opacity: 0.2;
}
.scene path:nth-of-type(3) {
  fill-opacity: 0.3;
}
.scene path:nth-of-type(4) {
  fill-opacity: 0.4;
}
.scene path:nth-of-type(5) {
  fill-opacity: 0.5;
}
.scene path:nth-of-type(6) {
  fill-opacity: 0.6;
}.btnActive:active {
  -webkit-transform: translateY(0.08rem);
          transform: translateY(0.08rem);
}

.u-tipPoint {
  width: 0.12rem;
  height: 0.12rem;
  background-color: rgb(0, 183, 255);
  outline: 0.01rem solid rgb(0, 183, 255);
  padding: 0.04rem;
  background-clip: content-box;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: 0 0 0.15rem #fff;
}

.u-tipPoint2 {
  width: 0.13rem;
  height: 0.13rem;
  background-color: rgb(0, 0, 0);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .8);
}

.qualityColor0 {
  color: #d6c9c9;
}

.qualityColor1 {
  color: #52d332;
}

.qualityColor2 {
  color: #5aa7f5;
}

.qualityColor3 {
  color: #1186fc;
}

.qualityColor4 {
  color: #085480;
}

.qualityColor5 {
  color: #194d6b;
}

.qualityColor6 {
  color: #e9fa00;
}

.qualityColor7 {
  color: #de0909;
}

.qualityColor8 {
  color: #c90d00;
}

.qualityBg0 {
  background-color: #d6c9c9 !important;
}

.qualityBg1 {
  background-color: #52d332 !important;
}

.qualityBg2 {
  background-color: #5aa7f5 !important;
}

.qualityBg3 {
  background-color: #1186fc !important;
}

.qualityBg4 {
  background-color: #085480 !important;
}

.qualityBg5 {
  background-color: #194d6b !important;
}

.qualityBg6 {
  background-color: #e9fa00 !important;
}

.qualityBg7 {
  background-color: #de0909 !important;
}

.qualityBg8 {
  background-color: #c90d00 !important;
}

.qualityBgColor0 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor1 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor2 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor3 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor4 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor5 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor6 {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
}

.qualityBgColor7 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 0.7rem 0.7rem;
}

.qualityBgColor8 {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 0.4rem 0.4rem;
}

.pView .title {
  height: 0.6rem;
  font-size: 0.32rem;
  color: #ffffff;
  text-shadow: 0 0 0.1rem #000;
}

.pView .titleIcon {
  height: 0.4rem;
  width: 1.13rem;
  margin: 0 0.1rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: invert(100%) drop-shadow(0 0 0.1rem #ffffff);
          filter: invert(100%) drop-shadow(0 0 0.1rem #ffffff);
  background: url("./titile3-65d46b9a.png") center center/100% 100% no-repeat;
}

.pView .tips {
  margin: 0.05rem auto;
}

.pView .tips .tip {
  color: rgb(77, 234, 161);
  font-size: 0.22rem;
}

.pView .tabs {
  height: 0.3rem;
  padding: 0.05rem;
}

.pView .tabs .tab {
  min-width: 1.5rem;
  height: 0.36rem;
  font-size: 0.22rem;
  position: relative;
  padding: 0 0.1rem;
  color: #ffffff;
  border: 0.01rem solid #fff;
  margin: 0 0.05rem;
}

.pView .tabs .tab.active {
  color: #2076e7;
  background-color: #ffffff;
  box-shadow: 0 0 0.12rem rgb(52, 51, 51);
}

.pView .tabs .tab.active::before {
  content: "-";
  margin-right: 0.05rem;
}

.pView .tabs .tab.active::after {
  content: "-";
  margin-left: 0.05rem;
}

.pView2 {
  box-shadow: 0 0 0.32rem 0.1rem rgb(0, 0, 0);
  position: relative;
  border: 0.2rem double rgb(73, 73, 73);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.pView2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #a0eaf5;
}

.pView2 .title {
  line-height: 0.5rem;
  position: relative;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.05rem #000);
          filter: drop-shadow(0 0 0.05rem #000);
  font-size: 0.3rem;
}

.pView2 .title::before {
  content: "";
  position: absolute;
  right: -0.4rem;
  width: 0.3rem;
  height: 0.3rem;
  top: 0.1rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: invert(100%);
          filter: invert(100%);
  background: url("./title1-c307762e.png") center center/100% 100% no-repeat;
}

.pView2 .title::after {
  content: "";
  position: absolute;
  left: -0.4rem;
  width: 0.3rem;
  height: 0.3rem;
  top: 0.1rem;
  background: url("./title1-c307762e.png") center center/100% 100% no-repeat;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

.pView2 .content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  padding-top: 0.1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.pView2 .tips {
  margin: 0.1rem auto;
}

.pView2 .tips .tip {
  color: rgb(77, 234, 161);
  font-size: 0.22rem;
}

.pView2 .bottom {
  width: 100%;
  height: 0.5rem;
  bottom: -1rem;
  position: absolute;
  left: 0;
}

.pView2 .bottom .closeBtn {
  width: 0.6rem;
  height: 0.6rem;
  position: relative;
  background-color: #203b3f;
  font-size: 0.6rem;
  font-weight: bold;
  color: rgb(73, 73, 73);
  border: 0.1rem double rgb(73, 73, 73);
  box-shadow: 0 0 0.32rem 0.1rem rgb(0, 0, 0);
}

.uLine1 {
  width: 5.1rem;
  height: 0.2rem;
  background: url("./line1-18bdc84e.png") center center/100% 100% no-repeat;
}

.littleTitle5 {
  width: 0.73rem;
  height: 0.13rem;
  margin: 0 0.1rem;
  background: url("./title5-d64bb2c0.png") center center/100% 100% no-repeat;
}

.buildLvlupBtn {
  width: 2.8rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem rgba(106, 167, 198, .6901960784);
  background-color: rgba(106, 167, 198, .6901960784);
  position: absolute;
  bottom: 0.5rem;
}

.buildLvlupBtn .icon {
  font-size: 0.36rem;
  margin-right: 0.2rem;
}

.buildLvlupMaxLvl {
  width: 2.8rem;
  height: 0.6rem;
  color: red;
  position: absolute;
  bottom: 0.5rem;
}

.n-itemIcon {
  text-shadow: 0 0 0.07rem rgba(0, 0, 0, .6);
}

.labelIcon {
  height: 0.13rem;
  width: 0.72rem;
  margin: 0 0.1rem;
  background: url("./title3-6746942d.png") center center/100% 100% no-repeat;
}#message {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .8);
  font-size: 0.28rem;
  list-style: none;
  position: absolute;
  top: 0.7rem;
  left: 50%;
  -webkit-transition: 0.3 all;
  transition: 0.3 all;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1010;
  pointer-events: none;
}
#message .message-notice {
  padding: 0.08rem 0.08rem;
  text-align: center;
  pointer-events: none;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 0.15rem;
}
#message .message-notice .message-notice-content {
  padding: 0.1rem 0.24rem;
  background: #ffffff;
  white-space: nowrap;
  font-size: 0.26rem;
  pointer-events: none;
  border: 0.04rem solid #666;
}
#message .message-notice .message-notice-content.info {
  color: #91cdf8;
}
#message .message-notice .message-notice-content.success {
  color: #56a8eb;
}
#message .message-notice .message-notice-content.error {
  color: #f04134;
}
#message .message-notice .message-notice-content.warning {
  color: #dead1b;
}

#message2 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .8);
  font-size: 0.28rem;
  line-height: 1.5;
  list-style: none;
  position: absolute;
  top: 0.05rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1010;
}
#message2 .message-notice {
  padding: 0.08rem 0.08rem;
  text-align: center;
}
#message2 .message-notice .message-notice-content {
  padding: 0.01rem 0.24rem;
  border-radius: 0.06rem;
  box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, .8);
  background: #fff;
  white-space: nowrap;
  font-size: 0.24rem;
}
#message2 .message-notice .message-notice-content .message-notice-icon {
  margin-right: 0.16rem;
  font-size: 0.26rem;
}
#message2 .message-notice .message-notice-content.info {
  color: #56b1f2;
}
#message2 .message-notice .message-notice-content.success {
  color: #000000;
}
#message2 .message-notice .message-notice-content.error {
  color: #f04134;
}
#message2 .message-notice .message-notice-content.warning {
  color: #dead1b;
}.panelPop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.panelPop .panelPopContenBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000;
}
.panelPop .panelPopContent {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.panelPop .closeBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.panelPop .panelPopContent > div:nth-child(2) {
  position: relative;
}

.panelPop2 .panelPopContent {
  position: absolute;
  z-index: 100;
}.tabs {
  position: relative;
  margin-bottom: 0.1rem;
}
.tabs .tabsItem {
  width: 1.4rem;
  color: rgb(255, 255, 255);
  text-align: center;
  height: 0.5rem;
  position: relative;
  line-height: 0.26rem;
  border: 0.01rem solid #fff;
  margin: 0.05rem;
  font-size: 0.3rem;
}
.tabs .tabsItem.black {
  color: #eee;
}
.tabs .tabsItem span {
  vertical-align: bottom;
}
.tabs .tabsItem.active {
  color: #0066ff;
  border-color: #0066ff;
}
.tabs .tabsItem .amount {
  font-size: 0.22rem;
  background-color: #9fa195;
  height: 0.28rem;
  line-height: 0.28rem;
  color: #fff;
  padding: 0 0.05rem;
  border-radius: 0.05rem;
  margin-left: 0.05rem;
}
.tabs .activeBorderWrap {
  width: 0.5rem;
  position: absolute;
  bottom: 0;
  -webkit-transition: left 0.6s;
  transition: left 0.6s;
}
.tabs .activeBorderWrap .activeBorder {
  width: 100%;
  background-color: #2BF8B0;
  height: 0.06rem;
  border-radius: 0.06rem;
  margin-left: -100%;
}.waitPoint {
  text-align: left;
  width: 0.4rem;
}.loadingio-spinner-bars-r8jic8hwqsh {
  width: 0.6rem;
  height: 0.8rem;
}
@-webkit-keyframes ldio-lxahfjr9md {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ldio-lxahfjr9md {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div {
  position: absolute;
  width: 0.05rem;
  height: 0.2rem;
  top: 0.25rem;
  -webkit-animation: ldio-lxahfjr9md 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: ldio-lxahfjr9md 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div:nth-child(1) {
  -webkit-transform: translate(0.075rem, 0);
          transform: translate(0.075rem, 0);
  background: #d4c4c5;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div:nth-child(2) {
  -webkit-transform: translate(0.175rem, 0);
          transform: translate(0.175rem, 0);
  background: #bddcdd;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div:nth-child(3) {
  -webkit-transform: translate(0.275rem, 0);
          transform: translate(0.275rem, 0);
  background: #b6a593;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div:nth-child(4) {
  -webkit-transform: translate(0.375rem, 0);
          transform: translate(0.375rem, 0);
  background: #7be3bc;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.loadingio-spinner-bars-r8jic8hwqsh .loadingio-spinner-bars-r8jic8hwqsh {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateZ(0) scale(1);
          transform: translateZ(0) scale(1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  /* see note above */
}
.loadingio-spinner-bars-r8jic8hwqsh .ldio-lxahfjr9md div {
  box-sizing: content-box;
}

.anticon-loading {
  font-size: 0.42rem;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-animation: loadingCircle 1s infinite linear;
          animation: loadingCircle 1s infinite linear;
}

@-webkit-keyframes loadingCircle {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loadingCircle {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}.c-confirm {
  background-color: #ffffff;
  min-width: 4rem;
  min-height: 2.2rem;
  position: relative;
  color: #000;
  padding: 0.1rem 0.2rem;
}
.c-confirm .content {
  font-size: 0.24rem;
  padding: 0.2rem 0;
  word-break: break-all;
  word-wrap: break-word;
  text-align: center;
}
.c-confirm .btn {
  width: 1.2rem;
  height: 0.5rem;
}
.c-confirm .btn.cancel {
  background-color: rgb(235, 224, 131);
  color: #333;
}
.c-confirm .btn.submit {
  background-color: rgb(45, 158, 211);
}

.button.button3 {
  width: 1.8rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  background: -webkit-linear-gradient(bottom, #35741B, #4C8425, #5E9133);
  background: linear-gradient(0deg, #35741B, #4C8425, #5E9133);
  position: relative;
}
.button.button3 .button3Content {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0.26rem;
  color: #fff;
  z-index: 3;
}
.button.button3::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.button.button3::after {
  content: "";
  position: absolute;
  top: -0.05rem;
  left: -0.05rem;
  right: -0.05rem;
  bottom: -0.05rem;
  border: solid 0.02rem #4C8425;
  border-radius: 0.6rem;
  background: #fff;
  z-index: -1;
  box-shadow: 0.01rem 0.01rem 0.06rem rgba(0, 0, 0, .3);
}
.button.button3:active {
  -webkit-transform: translateY(0.05rem);
          transform: translateY(0.05rem);
}.vbutton {
  color: #000;
  color: #ffffff;
  z-index: 1;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  margin: 0.1rem auto;
  position: relative;
}
.vbutton.vbutton1 {
  border: 0.08rem solid transparent;
  border-radius: 0.3rem;
}
.vbutton.vbutton1 .vbuttonContent {
  width: 100%;
  height: 100%;
  border-radius: 0.3rem;
}
.vbutton.vbutton1 .vbuttonIcon {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  font-size: 0.22rem;
  margin-top: 0.03rem;
  color: #9b9b9b;
  position: absolute;
}
.vbutton.vbutton1 .vbuttonIcon1 {
  left: 0.1rem;
}
.vbutton.vbutton1 .vbuttonIcon2 {
  right: 0.1rem;
}
.vbutton.vbutton2 .vbuttonContent {
  color: #ffffff;
  width: calc(100% - 0.1rem);
  height: calc(100% - 0.1rem);
  border: 0.04rem solid #95a0a0;
}
.vbutton.vbutton3 {
  background-image: url("./asfalt-light-3d9337fe.png");
  padding: 0.05rem;
}
.vbutton.vbutton3 .vbuttonContent {
  color: #ffffff;
  width: 100%;
  height: 100%;
}
.vbutton.bgType1 .vbuttonContent {
  color: #3a3636;
  background: rgb(71, 182, 229);
}
.vbutton.bgType2 .vbuttonContent {
  color: #efd3d3;
  background: rgba(55, 60, 62, .95);
}
.vbutton.bgType3 .vbuttonContent {
  color: #ffffff;
  background: rgba(238, 93, 15, .95);
  background: -webkit-linear-gradient(45deg, rgba(238, 93, 15, .95), rgba(78, 150, 238, .95));
  background: linear-gradient(45deg, rgba(238, 93, 15, .95), rgba(78, 150, 238, .95));
}
.vbutton:active {
  box-shadow: 0 0 0 #000;
  -webkit-transform: translateY(0.08rem);
          transform: translateY(0.08rem);
}
.vbutton.sizes {
  width: 1.2rem;
  height: 0.35rem;
  font-size: 0.18rem;
}
.vbutton.sizem {
  width: 1.8rem;
  height: 0.5rem;
  font-size: 0.24rem;
}
.vbutton.sizel {
  width: 2.4rem;
  height: 0.6rem;
  font-size: 0.26rem;
}
.vbutton.sizexl {
  width: 3.5rem;
  height: 0.6rem;
  font-size: 0.26rem;
}#lvlupNeed {
  width: 5.5rem;
  min-height: 3rem;
}
#lvlupNeed .needs {
  padding: 0.2rem 0.1rem;
}
#lvlupNeed .needs .need {
  height: 0.5rem;
}#cheat {
  width: 100%;
  height: 100%;
  background-color: rgb(43, 43, 43);
  color: #fff;
}
#cheat .btn {
  min-width: 1rem;
  height: 0.4rem;
  background-color: #fff;
  color: #000;
  margin: 0.05rem;
  font-size: 0.2rem;
  line-height: 0.4rem;
  padding: 0 0.1rem;
}
#cheat .btn.active {
  background-color: rgb(30, 143, 196);
}
#cheat #petCopyBtn {
  width: 7rem;
  height: 5rem;
  background-color: #fff;
  color: #000;
  padding: 0.2rem;
  font-size: 0.2rem;
  word-break: break-all;
}
#cheat #abyssCopyBtn {
  width: 7rem;
  height: 3rem;
  background-color: #fff;
  color: #000;
  padding: 0.2rem;
  font-size: 0.2rem;
  word-break: break-all;
}
#cheat .abyssLvlInput {
  width: 1.5rem;
}
#cheat .skillItem {
  height: 0.4rem;
  color: #fff;
}
#cheat .equipmentBox {
  border: 0.01rem solid #fff;
  padding: 0.05rem;
  font-size: 0.18rem;
}
#cheat select {
  width: 1rem;
  height: 0.35rem;
  font-size: 0.18rem;
  border-width: 0;
  padding: 0;
  line-height: 0.25rem;
}
#cheat select option {
  width: 1.4rem;
}
#cheat .itemList {
  height: 100%;
  overflow: auto;
}
#cheat input {
  width: 4.2rem;
  height: 0.35rem;
  font-size: 0.18rem;
  border-width: 0;
  padding: 0;
}
#cheat .elementInput {
  width: 0.6rem;
}
#cheat .monsterItem {
  margin: 0.1rem;
}
#cheat .monsterItem .monsterIcon {
  font-size: 0.6rem;
}
#cheat .monsterItem .monsterImg {
  height: 0.6rem;
  width: 0.6rem;
}
#cheat .monsterItem .monsterID {
  font-size: 0.24rem;
}
#cheat .skillIcon {
  font-size: 0.6rem;
}#loginWrap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  margin-top: -1rem;
}
#loginWrap .logo {
  width: 100%;
  font-size: 0.9rem;
  text-shadow: 0 0 0.25rem #030303;
  height: 1rem;
  letter-spacing: 0.1rem;
  position: relative;
  color: #fff;
  background-position: 0;
  -webkit-animation: text-ani 16s ease-in-out infinite;
          animation: text-ani 16s ease-in-out infinite;
}
@-webkit-keyframes text-ani {
  to {
    background-position: 100vw 0;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="360" /></filter></svg>#filter');
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes text-ani {
  to {
    background-position: 100vw 0;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="360" /></filter></svg>#filter');
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
#loginWrap .login {
  margin-top: 0.2rem;
  height: 9rem;
}
#loginWrap .login .title {
  font-size: 0.3rem;
}
#loginWrap .login input {
  width: 3.3rem;
  height: 0.45rem;
  background: transparent;
  border: none;
  padding: 0 0.1rem;
  font-size: 0.28rem;
  border-bottom: 0.02rem solid #000;
}
#loginWrap .login .item {
  margin: 0.2rem 0;
}
#loginWrap .login .label {
  margin-right: 0.2rem;
}
#loginWrap .login .btn {
  width: 1.3rem;
  height: 0.6rem;
  margin-top: 0.2rem;
  box-shadow: 0 0 0.1rem rgb(82, 82, 82);
}
#loginWrap .login .tipBtn {
  width: 1.3rem;
  height: 0.6rem;
  margin-top: 0.3rem;
  border-bottom: 0.01rem solid #000;
}
#loginWrap .login pre {
  height: 4rem;
}
#loginWrap .login .arrow {
  font-size: 0.22rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  box-shadow: 0 0 0.1rem rgb(82, 82, 82);
  margin-left: 0.15rem;
}
#loginWrap .login .arrow2 {
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.15rem;
}
#loginWrap .login .oneKeyLogin {
  width: 1.2rem;
  background-color: rgba(43, 40, 40, .5960784314);
  text-align: center;
  margin-top: 0.2rem;
  font-size: 0.22rem;
  padding: 0.1rem;
  box-shadow: 0 0 0.1rem rgb(82, 82, 82);
}
#loginWrap .versionText {
  margin-top: 0.3rem;
  color: #454545;
  font-size: 0.24rem;
}
#loginWrap .startBtn {
  width: 2rem;
  height: 0.6rem;
  color: #000;
  background-color: #fff;
}

.userList {
  width: 4rem;
  height: 4.5rem;
  background-color: #fff;
  color: #000;
  position: relative;
}
.userList .title {
  text-align: center;
  font-size: 0.3rem;
  line-height: 0.5rem;
}
.userList .list {
  overflow: auto;
}
.userList .item {
  color: #333;
  margin: 0.13rem auto;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  width: 90%;
  border-radius: 0.1rem;
  background: #ffffff;
  box-shadow: 0.07rem 0.07rem 0.13rem #cccccc, -0.07rem -0.07rem 0.13rem #ffffff;
}
.userList .bottom {
  height: 0.8rem;
}.progressCover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .753);
}#main {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
#main #fps {
  position: absolute;
  top: 0.1rem;
  left: 0.2rem;
  height: 0.3rem;
  width: 2.9rem;
  font-size: 0.24rem;
}
#main #fps.battleType1 {
  color: rgba(255, 255, 255, 0);
}
#main #fps.battleType2 {
  color: #ffffff;
}
#main .playerInfo {
  width: 7rem;
  height: 0.8rem;
  background-color: rgb(200, 240, 245);
  border-radius: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0 0.15rem;
}
#main .playerInfo .playerInfoItem {
  width: 1.5rem;
  background-color: #26a8be;
  margin: 0 0.1rem;
  height: 0.5rem;
}
#main .bottom {
  width: 100%;
}
#main .menuLogo {
  font-size: 0.5rem;
  text-shadow: 0 0 0.15rem rgba(0, 0, 0, .7);
}
#main .leftMenu .menuBtn {
  border-left-width: 0;
}
#main .rightMenu .menuBtn {
  border-right-width: 0;
  border-bottom-left-radius: 0.3rem;
}
#main .setBtn {
  width: 1.2rem;
  height: 0.5rem;
  position: absolute;
  background-color: rgb(204, 236, 237);
  border: 0.04rem solid #000000;
  left: 0.1rem;
  bottom: 0.05rem;
  border-radius: 47% 53% 61% 39%/12% 87% 13% 88%;
  background-color: #ffffff;
  box-shadow: 0 0 0.15rem rgba(255, 255, 255, .8);
  box-shadow: 0 0 0.15rem rgb(0, 0, 0);
}
#main .setBtn .setIcon {
  height: 0.3rem;
  width: 0.3rem;
  font-size: 0.3rem;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  text-shadow: 0 0 0.1rem #000;
}
#main .mailBtn {
  width: 1.2rem;
  height: 0.5rem;
  position: absolute;
  right: 0.1rem;
  bottom: 0.05rem;
  border: 0.04rem solid #000000;
  box-shadow: 0 0 0.15rem rgba(255, 255, 255, .8);
  background-color: #ffffff;
  border-radius: 53% 47% 39% 61%/87% 12% 88% 13%;
  box-shadow: 0 0 0.15rem rgb(0, 0, 0);
}
#main .mailBtn .mailIcon {
  font-size: 0.4rem;
  text-shadow: 0 0 0.1rem #000;
}#kbattle2 {
  width: 7.5rem;
  height: 4.5rem;
  position: relative;
  margin-top: -0.2rem;
  z-index: 1;
}
#kbattle2 canvas {
  width: 100%;
  height: 100%;
}
#kbattle2 .battleContent {
  width: 100%;
  height: 100%;
  margin: 0 auto 0;
  position: relative;
}
#kbattle2 .battleContent .teamItem {
  position: relative;
  width: 100%;
  z-index: 2;
}
#kbattle2 .battleResultText {
  color: #fff;
  margin-top: 0.8rem;
}
#kbattle2 .bottomBtns {
  position: relative;
  z-index: 2;
  width: 7rem;
  margin-top: 0.1rem;
}
#kbattle2 .closeBtn {
  width: 1.6rem;
  height: 0.5rem;
  background-color: rgb(29, 83, 142);
  color: #fff;
  box-shadow: 0 0 0.1rem #000;
}
#kbattle2 .speedUpBtn {
  width: 1.2rem;
  height: 0.4rem;
  background-color: #000;
  color: #fff;
  font-size: 0.24rem;
  box-shadow: 0 0 0.1rem #000;
}
#kbattle2 .fighter,
#kbattle2 .emptyFighter {
  width: 2.4rem;
  height: 1rem;
  margin: 0.2rem 0.2rem 0;
}#fighterInfo {
  padding: 0.2rem 0;
  background-color: #ffffff;
  box-shadow: 0 0 0.08rem #000;
}
#fighterInfo .partnerInfoTitle {
  height: 0.5rem;
  font-size: 0.32rem;
  color: #D6CA24;
}
#fighterInfo .partnerInfoContent {
  width: 7.3rem;
  border-radius: 0.15rem;
  padding: 0.08rem;
  overflow: hidden;
}
#fighterInfo .partnerInfoContent .attriTitle {
  margin: 0 auto;
}
#fighterInfo .partnerInfoContent .attriTitle .attriTitleIcon {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  background-size: 100% 100%;
}
#fighterInfo .partnerInfoContent .attriItem {
  color: #3d3d3d;
  margin: 0.1rem 0;
  width: 2.2rem;
  border-radius: 0.05rem;
  height: 0.5rem;
  font-size: 0.22rem;
  color: #000000;
  border: 0.02rem dashed #000;
}
#fighterInfo .partnerInfoContent .attriItem .attriName {
  padding-left: 0.1rem;
  width: 1rem;
}
#fighterInfo .partnerInfoContent .attriItem .attriValue {
  text-align: center;
}
#fighterInfo .partnerInfoContent .emptyAttriItem {
  margin: 0.1rem 0;
  width: 2.2rem;
  height: 0.5rem;
}
#fighterInfo .partnerInfoContent .skillItem {
  border: 0.02rem solid #989d9b;
  color: #3c4442;
  margin: 0.03rem 0.1rem;
  width: 1.7rem;
  border-radius: 0.05rem;
  height: 0.45rem;
  font-size: 0.2rem;
  background-color: rgb(158, 192, 246);
}
#fighterInfo .partnerInfoContent .emptyattriItem {
  width: 1.7rem;
  height: 0.45rem;
  margin: 0.03rem 0;
}
#fighterInfo .partnerInfoContent .more {
  position: relative;
  background-color: #969c9b;
  color: #000;
}
#fighterInfo .partnerInfoContent .more::before {
  position: absolute;
  content: "";
  right: -0.12rem;
  top: -0.12rem;
  border-radius: 50%;
  background-color: red;
  width: 0.24rem;
  height: 0.24rem;
}
#fighterInfo .partnerInfoContent .stack {
  border-radius: 0.1rem;
  background-color: #03506e;
  padding: 0.05rem;
  margin-left: 0.05rem;
  color: #fff;
}
#fighterInfo .partnerInfoContent .round {
  border-radius: 0.1rem;
  background-color: #32e893;
  padding: 0.05rem;
  margin-left: 0.05rem;
  color: #fff;
}
#fighterInfo .divideLine {
  width: 6.8rem;
  height: 0.02rem;
  background-color: #fff;
  margin: 0.1rem auto;
}#kbattle5 {
  width: 7.5rem;
  height: 4.5rem;
  position: relative;
  z-index: 1;
}
#kbattle5 canvas {
  width: 100%;
  height: 100%;
}
#kbattle5 .battleContent {
  width: 100%;
  height: 100%;
  margin: 0 auto 0;
  position: relative;
}
#kbattle5 .battleContent .teamItem {
  position: relative;
  width: 100%;
  z-index: 2;
}
#kbattle5 .battleResultText {
  color: #fff;
  margin-top: 0.8rem;
}
#kbattle5 .bottomBtns {
  position: relative;
  z-index: 2;
  width: 7rem;
  margin-top: 0.1rem;
}
#kbattle5 .closeBtn {
  width: 1.6rem;
  height: 0.5rem;
  background-color: rgb(29, 83, 142);
  color: #fff;
  box-shadow: 0 0 0.1rem #000;
}
#kbattle5 .speedUpBtn {
  width: 1.2rem;
  height: 0.4rem;
  background-color: #000;
  color: #fff;
  font-size: 0.24rem;
  box-shadow: 0 0 0.1rem #000;
}
#kbattle5 .fighter,
#kbattle5 .emptyFighter {
  width: 2.4rem;
  height: 1rem;
  margin: 0.2rem 0.2rem 0;
}#adventure {
  width: 100%;
  position: relative;
}
#adventure .adventureHead {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#adventure .battleTip {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  z-index: 20;
}
#adventure .battleTip .battleTipText {
  padding: 0.2rem;
  color: #000;
  background-color: #10bee6;
}
#adventure .adItem {
  width: 1rem;
  height: 0.4rem;
  font-size: 0.22rem;
  background-color: #2ff14f;
  margin: 0 0.05rem;
  color: #000000;
  border-radius: 0.15rem;
}
#adventure .speeds .speedBtn {
  border: 0.02rem solid #fff;
  margin: 0 0.05rem;
  width: 0.35rem;
  height: 0.35rem;
  font-size: 0.18rem;
}
#adventure .speeds .speedBtn.active {
  background-color: #fff;
  color: #000;
}.adView {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.2rem;
}
.adView .title {
  font-size: 0.36rem;
}
.adView .gameItem {
  width: 6.5rem;
  height: 6rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.adView .gameItem .gameName {
  color: #ff1c1c;
  font-size: 0.32rem;
  margin: 0.3rem 0;
  font-weight: bold;
}
.adView .gameItem .gameName span {
  font-size: 0.22rem;
  color: #6090f0;
  margin-left: 0.1rem;
}
.adView .gameItem .gameIcon1 {
  width: 1.8rem;
  height: 1.8rem;
  background: url("./wuxiaicon-b0da3f7b.png") center center/100% 100% no-repeat;
}
.adView .gameItem .gameIcon2 {
  width: 0.8rem;
  height: 0.8rem;
  background: url("./gameIcon1-993c99ba.png") center center/100% 100% no-repeat;
}
.adView .gameItem .gameDesc {
  color: #000;
  font-size: 0.22rem;
}
.adView .gameItem a {
  color: #ffffff;
}
.adView .gameItem .btn {
  width: 2rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  background-color: #6090f0;
}
.adView .gameItem .tip {
  color: #4c911f;
}
.adView .getBtn {
  width: 4rem;
  height: 0.6rem;
  margin-top: 0.3rem;
  color: #ffffff;
  background-color: #cbce18;
}#adShop {
  width: 6rem;
  height: 3.5rem;
  background-color: #fff;
  padding: 0.1rem;
}
#adShop .title {
  line-height: 1rem;
}
#adShop .item {
  width: 5.5rem;
  margin: 0.1rem 0;
}
#adShop .btn {
  width: 1rem;
  height: 0.4rem;
  background-color: #4ca6e3;
  border: 0.01rem solid #fff;
  font-size: 0.22rem;
}#composeItem {
  width: 6rem;
  height: 3.5rem;
  background-color: #ffffff;
  position: relative;
  border: 0.04rem solid #a5edf5;
  box-shadow: 0 0 0.1rem #a5edf5;
}
#composeItem .title {
  text-shadow: 0 0 0.1rem #000;
  line-height: 0.8rem;
  font-size: 0.32rem;
}
#composeItem .point {
  position: absolute;
  width: 0.14rem;
  height: 0.14rem;
  background-color: #57d0dd;
}
#composeItem .point.point1 {
  left: 0.1rem;
  top: 0.1rem;
}
#composeItem .point.point2 {
  right: 0.1rem;
  bottom: 0.1rem;
}
#composeItem .point.point3 {
  left: 0.1rem;
  bottom: 0.1rem;
}
#composeItem .point.point4 {
  right: 0.1rem;
  top: 0.1rem;
}
#composeItem .arrow {
  color: #000;
}
#composeItem .get {
  color: #333;
}
#composeItem .btns {
  width: 100%;
  margin-top: 0.25rem;
}
#composeItem .btns .btn {
  width: 1.3rem;
  height: 0.5rem;
  background-color: #a5edf5;
  box-shadow: 0 0 0.1rem #ffffff;
  color: #000000;
  font-size: 0.24rem;
}#itemList .bagtabs {
  margin-bottom: 0.1rem;
  border-bottom: 0.01rem solid rgba(255, 255, 255, .291);
  width: 6rem;
  margin: 0 auto 0.1rem;
  padding-bottom: 0.05rem;
  box-sizing: border-box;
}
#itemList .bagtabs .labelTitle {
  width: 0.3rem;
  height: 0.6rem;
}
#itemList .bagtabs .bagtab {
  height: 0.6rem;
  text-align: center;
  margin-right: 0.15rem;
  padding: 0 0.1rem;
  background-color: rgba(255, 255, 255, .451);
  max-width: 0.9rem;
  border: 0.01rem solid #bbd4f1;
}
#itemList .bagtabs .bagtab.active {
  background-color: #4d93e9;
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .5);
  color: #fff;
}
#itemList .bagtabs .mapTab {
  height: 0.4rem;
  min-width: 0.8rem;
  margin-right: 0.15rem;
}
#itemList .bagtabs .tabBtn {
  height: 0.4rem;
  width: 0.8rem;
  background-color: rgb(61, 150, 98);
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .5);
  color: #fff;
}
#itemList .list {
  height: 7.2rem;
  width: 6.8rem;
  overflow: auto;
  margin: 0 auto;
}
#itemList .listItem {
  width: 6.8rem;
  margin: 0 auto;
}
#itemList .handleBtns {
  margin: 0 0 0.1rem;
}
#itemList .bagSize {
  width: 2rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  color: #444;
  background-color: rgb(111, 202, 241);
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
#itemList .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#itemList .handleBtn.resolve {
  font-size: 0.2rem;
}
#itemList .item {
  width: 3.1rem;
  font-size: 0.24rem;
  height: 0.55rem;
  padding: 0 0.1rem;
  background-color: rgb(194, 244, 231);
  margin: 0.1rem auto;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
}
#itemList .item .n-itemIcon {
  margin: 0 0.1rem;
  font-size: 0.5rem;
}
#itemList .item .itemName {
  width: 4.5rem;
  color: #272525;
}
#itemList .item .value {
  text-align: right;
  color: #272525;
}
#itemList .item.active {
  background-color: rgb(100, 196, 218);
}
#itemList .itemInfo {
  height: 2rem;
  width: 6.4rem;
  margin-top: 0.2rem;
  background-color: rgba(90, 183, 220, .657);
  box-shadow: 0 0 0.05rem rgba(39, 37, 37, .5568627451);
}
#itemList .itemInfo .desc {
  height: 1.2rem;
  padding: 0.2rem;
  font-size: 0.22rem;
  color: #333;
}
#itemList .itemInfo .btns {
  height: 0.6rem;
}
#itemList .itemInfo .btns .btn {
  height: 0.45rem;
  width: 1.2rem;
  box-shadow: 0 0 0.1rem #474747;
  margin: 0 0.2rem;
}.sellItem {
  width: 7rem;
  height: 4rem;
}
.sellItem .item .getGold {
  width: 2.3rem;
  color: #a1f5da;
}
.sellItem .item .amount {
  width: 2.3rem;
}#gemChange {
  width: 6.5rem;
  height: 4.5rem;
}
#gemChange .point {
  position: absolute;
  width: 0.14rem;
  height: 0.14rem;
  background-color: #57d0dd;
}
#gemChange .point.point1 {
  left: 0.1rem;
  top: 0.1rem;
}
#gemChange .point.point2 {
  right: 0.1rem;
  bottom: 0.1rem;
}
#gemChange .point.point3 {
  left: 0.1rem;
  bottom: 0.1rem;
}
#gemChange .point.point4 {
  right: 0.1rem;
  top: 0.1rem;
}
#gemChange .arrow {
  color: #000;
}
#gemChange .get {
  color: #333;
}
#gemChange .gemType {
  margin: 0.15rem;
  background-color: #fff;
  border-radius: 0.08rem;
  padding: 0.1rem 0.2rem;
  color: #000;
}
#gemChange .gemType.active {
  background-color: #1d77d0;
}
#gemChange .btns {
  width: 100%;
  margin-top: 0.25rem;
}
#gemChange .btns .btn {
  width: 1.3rem;
  height: 0.5rem;
  background-color: #a5edf5;
  box-shadow: 0 0 0.1rem #ffffff;
  color: #000000;
  font-size: 0.24rem;
}#mainHead {
  height: 0.7rem;
  width: 100%;
  padding-left: 0.2rem;
  position: relative;
  z-index: 4;
}
#mainHead .item {
  width: 2.35rem;
  font-weight: bold;
  font-size: 0.26rem;
  margin: 0 0.05rem;
  color: #fffb00;
}
#mainHead .itemValue {
  margin-left: 0.1rem;
  font-size: 0.2rem;
}
#mainHead .diamondItem {
  width: 1.2rem;
  font-size: 0.24rem;
  margin: 0 0.05rem;
  border-radius: 0.2rem;
}
#mainHead .moreItem {
  width: 1.1rem;
  height: 0.5rem;
  font-size: 0.22rem;
  background-color: rgb(13, 80, 52);
  margin: 0 0.05rem;
  color: #81b3ff;
  border-radius: 0.15rem;
}
#mainHead .moreItem .icon {
  font-size: 0.4rem;
  margin-right: 0.05rem;
}
#mainHead .setIcon {
  width: 0.8rem;
  height: 0.4rem;
  font-size: 0.22rem;
  background-color: #222;
  margin: 0 0.05rem;
  color: #ffffff;
  border-radius: 0.15rem;
  background-color: hsl(216, 73%, 59%);
}#gameSet {
  width: 7.3rem;
  height: 7rem;
  background-color: #fff;
}
#gameSet .item {
  margin-top: 0.1rem;
  height: 0.7rem;
  width: 6rem;
  padding-bottom: 0.1rem;
  color: #000000;
}
#gameSet .item .itemName {
  width: 1.6rem;
}
#gameSet .item .itemValue {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-flex-basis: 0;
          flex-basis: 0;
  font-size: 0.22rem;
}
#gameSet .item .itemBtn {
  width: 1rem;
}
#gameSet .btn {
  width: 0.9rem;
  height: 0.45rem;
  border: 0.01rem solid #000;
  margin: 0 0.05rem;
  color: #141414;
}
#gameSet .btn.active {
  background-color: #a4cff3;
}
#gameSet input {
  width: 3rem;
  height: 0.4rem;
}
#gameSet .line {
  margin: 0.1rem auto;
}
#gameSet .line .line1 {
  width: 0.1rem;
  height: 0.01rem;
  margin: 0 0.06rem;
  background-color: #000000;
}
#gameSet .line .line2 {
  width: 5.9rem;
  height: 0.01rem;
  background-color: #000000;
}
#gameSet .loginOutBtn {
  margin-top: 1rem;
  width: 1.5rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem #ffffff;
}.modifyName {
  width: 5rem;
  height: 3.2rem;
  background-color: #fff;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .514);
  color: #000;
}
.modifyName .title {
  margin-bottom: 0.2rem;
}
.modifyName input {
  height: 0.45rem;
  width: 3rem;
  margin-bottom: 0.2rem;
}
.modifyName .btn {
  width: 1.2rem;
  height: 0.45rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .514);
  margin-top: 0.2rem;
}#market .list {
  height: 4.3rem;
}
#market .refreshBtn {
  width: 1.4rem;
  height: 0.45rem;
  font-size: 0.24rem;
  box-shadow: 0 0 0.1rem rgba(205, 205, 205, .612);
}
#market .line {
  margin: 0.1rem auto;
}
#market .line .line1 {
  width: 0.1rem;
  height: 0.01rem;
  margin: 0 0.06rem;
  background-color: #000;
}
#market .line .line2 {
  width: 5.9rem;
  height: 0.01rem;
  background-color: #000;
}
#market .need {
  font-size: 0.22rem;
  margin-bottom: 0.05rem;
}
#market .prop {
  font-size: 0.22rem;
  height: 0.55rem;
}
#market .btn {
  width: 1.9rem;
  height: 0.4rem;
  font-size: 0.2rem;
  background-color: rgb(16, 153, 153);
  padding-left: 0.1rem;
}
#market .btn .n-itemIcon {
  margin-right: 0.1rem;
  font-size: 0.3rem;
}
#market .discountText {
  text-decoration: line-through;
  margin-right: 0.1rem;
}
#market .discount {
  min-width: 0.7rem;
  padding: 0 0.05rem;
  height: 0.4rem;
  color: #000;
  font-size: 0.2rem;
  background-color: rgb(220, 220, 15);
  margin-right: 0.1rem;
}
#market .refreshTip {
  font-size: 0.22rem;
}
#market .item {
  width: 5.5rem;
  height: 0.5rem;
  margin: 0.1rem 0;
  padding: 0 0.1rem;
  border-bottom: 0.04rem dashed #989393;
}
#market .item .itemContent {
  width: 100%;
}
#market .item .itemIcon {
  font-size: 0.5rem;
  margin-right: 0.1rem;
}
#market .item .score {
  font-size: 0.2rem;
  padding: 0.05rem 0.1rem;
  border-radius: 0.08rem;
  background-color: #2b9ac6;
}#mail {
  color: #000;
  background-color: #fff;
  width: 7rem;
  padding: 0.1rem;
}
#mail .title {
  color: #000;
}
#mail .gameItem {
  width: 6.5rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
#mail .gameItem .gameName {
  color: #ff1c1c;
  font-size: 0.28rem;
}
#mail .gameItem .gameName span {
  font-size: 0.22rem;
  color: #6090f0;
  margin-left: 0.1rem;
}
#mail .gameItem .gameIcon1 {
  width: 0.8rem;
  height: 0.8rem;
  background: url("./wuxiaicon-b0da3f7b.png") center center/100% 100% no-repeat;
}
#mail .gameItem .gameIcon2 {
  width: 0.8rem;
  height: 0.8rem;
  background: url("./gameIcon1-993c99ba.png") center center/100% 100% no-repeat;
}
#mail .gameItem .gameDesc {
  color: #000;
  font-size: 0.22rem;
}
#mail .gameItem a {
  color: #ffffff;
}
#mail .prop {
  font-size: 0.2rem;
  height: 0.45rem;
}
#mail .btn {
  width: 1rem;
  height: 0.55rem;
  background-color: rgb(13, 112, 117);
}
#mail .refreshbtn {
  width: 1.5rem;
  height: 0.45rem;
  background-color: rgb(63, 202, 44);
  margin-top: 0.1rem;
}
#mail .refreshbtn:active {
  -webkit-transform: translateY(0.08rem);
          transform: translateY(0.08rem);
}
#mail .aifadianBtn {
  width: 1.4rem;
  height: 0.55rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 0.1rem #000;
  color: #946ce6;
  font-size: 0.22rem;
}
#mail .aifadianlogo {
  width: 0.45rem;
  height: 0.45rem;
}
#mail .item {
  width: 6.5rem;
}
#mail .item .name {
  font-size: 0.22rem;
}
#mail .item .itemContent {
  width: 100%;
}
#mail .giftitem {
  height: 0.7rem;
  width: 6.5rem;
}
#mail .giftitem .itemName {
  width: 1.6rem;
}
#mail .giftitem .itemBtn {
  width: 1.4rem;
}
#mail .giftitem .btn {
  width: 1rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000;
}
#mail .mailList {
  height: 5rem;
  overflow: auto;
}#mailMain .titleTab {
  margin-top: 0.2rem;
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.3rem;
  border-bottom: 0.04rem solid #000000;
}
#mailMain .titleTab.active {
  background-color: #000000;
  color: #ffffff;
}#abyssMain::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 7rem;
  height: calc(100% - 0.2rem);
  z-index: 1;
  border-radius: 0.2rem;
  background: url("../img/7b613603ab81ce314dd2311a9d47b5a4.jpg") center center/cover no-repeat;
  background-blend-mode: multiply;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncA type="table" tableValues="0 0.1" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: opacity(0.1);
          filter: opacity(0.1);
}
#abyssMain .titleTab {
  margin-top: 0.2rem;
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.3rem;
  border-bottom: 0.04rem solid #63bad7;
}
#abyssMain .titleTab.active {
  background-color: #63bad7;
  color: #ffffff;
}.oneKeyDecompose {
  width: 5rem;
  min-height: 6rem;
  background-color: #e7f3ff;
  position: relative;
  padding: 0.2rem;
}
.oneKeyDecompose .title {
  text-shadow: 0 0 0.1rem #000;
}
.oneKeyDecompose .selectBtn {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.2rem;
  color: #000;
}
.oneKeyDecompose .item {
  height: 0.6rem;
}
.oneKeyDecompose .item .itemName {
  width: 1.6rem;
  color: #333;
}
.oneKeyDecompose .item .btn {
  width: 0.8rem;
  height: 0.4rem;
  background-color: #000;
  color: #fff;
  margin-left: 0.3rem;
}
.oneKeyDecompose .item .selectBtn {
  width: 0.4rem;
  height: 0.4rem;
  border: 0.02rem solid #000;
}
.oneKeyDecompose .item .name {
  width: 0.9rem;
  text-align: center;
}#abyssBag {
  padding-top: 0.2rem;
}
#abyssBag .handleBtn {
  width: 1.2rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.15rem;
  font-size: 0.24rem;
}
#abyssBag .handleBtn.resolve {
  font-size: 0.2rem;
}
#abyssBag .bagSize {
  width: 2.3rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  color: #444;
  background-color: rgb(111, 202, 241);
  border-radius: 0.2rem;
}
#abyssBag .handleBtns {
  margin: 0 0 0.1rem;
}
#abyssBag .list {
  margin-left: 0.1rem;
  height: 10.5rem;
  overflow-y: auto;
}.abyssItem {
  margin: 0.11rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.08rem solid rgba(0, 0, 0, .2);
  position: relative;
  box-shadow: 0 0 0.1rem #000000;
  border-radius: 0.3rem;
}
.abyssItem.quality0 {
  border: 0.08rem solid rgba(214, 201, 201, .7843137255);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #d6c9c9 inset;
}
.abyssItem.quality1 {
  border: 0.08rem solid rgba(82, 211, 50, .8196078431);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #52d332 inset;
}
.abyssItem.quality2 {
  border: 0.08rem solid rgba(90, 167, 245, .7921568627);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #5aa7f5 inset;
}
.abyssItem.quality3 {
  border: 0.08rem solid rgba(17, 134, 252, .7490196078);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #1186fc inset;
}
.abyssItem.quality4 {
  border: 0.08rem solid rgba(8, 84, 128, .8431372549);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #085480 inset;
}
.abyssItem.quality5 {
  border: 0.08rem solid #194d6b;
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #194d6b inset;
}
.abyssItem.quality6 {
  border: 0.08rem solid rgba(233, 250, 0, .6196078431);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #e9fa00 inset;
}
.abyssItem.quality7 {
  border: 0.08rem solid rgba(222, 9, 9, .7803921569);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #de0909 inset;
}
.abyssItem.quality8 {
  border: 0.08rem solid rgba(222, 9, 9, .7);
  box-shadow: 0 0 0.1rem #000000, 0 0 0.3rem #de0909 inset;
}
.abyssItem .abyssItemIcon {
  width: 100%;
  height: 100%;
  font-family: cardIcon;
  font-size: 0.8rem;
  text-shadow: 0 0 0.15rem rgba(0, 0, 0, .7);
}
.abyssItem .abyssItemImg {
  height: 0.8rem;
  width: 0.8rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
.abyssItem .stars {
  top: -0.15rem;
  position: absolute;
  width: 100%;
}
.abyssItem .stars .star {
  font-size: 0.32rem;
  color: rgba(255, 255, 0, .771);
  margin: 0 -0.05rem;
}
.abyssItem .lock {
  height: 0.35rem;
  width: 0.35rem;
  font-size: 0.24rem;
  color: #333;
  color: rgb(255, 195, 166);
  background-color: #0da0d5;
  border-radius: 0.1rem;
  position: absolute;
  right: 0;
  top: 0;
}
.abyssItem .abyssLvl {
  position: absolute;
  width: 100%;
  bottom: -0.24rem;
}
.abyssItem .abyssLvl .lvlText {
  height: 0.32rem;
  width: 1rem;
  border: 0.04rem solid rgba(0, 0, 0, .2);
  font-size: 0.2rem;
  background-color: #F7F7F6;
  color: #000;
}.abyssItemInfo {
  width: 3.5rem;
  height: 4.8rem;
  background-color: #ffffff;
  color: #000;
  padding: 0.05rem 0.1rem;
}
.abyssItemInfo .equipmentInfoContent {
  height: 100%;
  padding: 0.1rem 0 0 0.1rem;
}
.abyssItemInfo .equipmentInfoContent .equipText {
  font-size: 0.22rem;
  margin-left: 0.2rem;
}
.abyssItemInfo .stars {
  margin-left: 0.2rem;
}
.abyssItemInfo .stars .star {
  font-size: 0.4rem;
  color: yellow;
  margin: 0 -0.05rem;
}
.abyssItemInfo .equipmentInfoHead {
  height: 0.5rem;
  font-size: 0.28rem;
  margin-bottom: 0.05rem;
  width: 3.1rem;
  color: #fff;
  background: -webkit-linear-gradient(left, rgb(17, 115, 172), rgb(202, 3, 3));
  background: linear-gradient(90deg, rgb(17, 115, 172), rgb(202, 3, 3));
  padding-left: 0.1rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 5%, 100% 16%, 85% 28%, 100% 39%, 84% 53%, 100% 57%, 90% 71%, 100% 89%, 90% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 90% 5%, 100% 16%, 85% 28%, 100% 39%, 84% 53%, 100% 57%, 90% 71%, 100% 89%, 90% 100%, 0 100%);
}
.abyssItemInfo .equipmentInfoHead.quality0 {
  background-color: #d6c9c9;
}
.abyssItemInfo .equipmentInfoHead.quality1 {
  background-color: #52d332;
}
.abyssItemInfo .equipmentInfoHead.quality2 {
  background-color: #5aa7f5;
}
.abyssItemInfo .equipmentInfoHead.quality3 {
  background-color: #1186fc;
}
.abyssItemInfo .equipmentInfoHead.quality4 {
  background-color: #085480;
}
.abyssItemInfo .equipmentInfoHead.quality5 {
  background-color: #194d6b;
}
.abyssItemInfo .equipmentInfoHead.quality6 {
  background-color: #e9fa00;
}
.abyssItemInfo .equipmentInfoHead.quality7 {
  background-color: #de0909;
}
.abyssItemInfo .equipmentInfoHead.quality8 {
  background-color: #c90d00;
}
.abyssItemInfo .attriTitle {
  width: 3rem;
}
.abyssItemInfo .attirTitleIcon {
  height: 0.2rem;
  background: url("./title2-d7ec949c.png") center center no-repeat;
  background-size: 100% 100%;
}
.abyssItemInfo .equipmentInfoItem {
  margin-right: 0.15rem;
  background: -webkit-linear-gradient(left, rgb(142, 187, 238), rgb(253, 254, 255));
  background: linear-gradient(90deg, rgb(142, 187, 238), rgb(253, 254, 255));
  font-size: 0.22rem;
  min-width: 1.4rem;
  margin-bottom: 0.1rem;
  background-color: rgb(177, 221, 235);
  padding-left: 0.1rem;
  padding-right: 0.2rem;
  height: 0.38rem;
}
.abyssItemInfo .equipmentInfoItem:last-child {
  margin-right: 0;
}
.abyssItemInfo .mainValue {
  font-size: 0.24rem;
  color: #2061c3;
}
.abyssItemInfo .mainName {
  margin-left: 0.1rem;
}
.abyssItemInfo .attriTitle {
  font-size: 0.26rem;
}
.abyssItemInfo .attriItem {
  font-size: 0.3rem;
}
.abyssItemInfo .attris.main {
  color: #f59663;
}
.abyssItemInfo .attris.sub {
  color: #63b1f5;
}
.abyssItemInfo .attris.sp {
  color: #8a1dc5;
}
.abyssItemInfo .attris.gemAttri {
  color: #4f5a07;
}
.abyssItemInfo .attris.suitAttri {
  color: #e89a1c;
}
.abyssItemInfo .attris.suitAttri .suitDesc {
  font-size: 0.24rem;
}
.abyssItemInfo .attriItem {
  margin-right: 0.1rem;
}
.abyssItemInfo .gemList {
  margin-top: 0.05rem;
  padding-left: 0.05rem;
}
.abyssItemInfo .gemList .gem {
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.15rem;
  border: 0.02rem solid rgb(161, 161, 161);
  box-shadow: 0 0 0.05rem rgb(112, 110, 110) inset;
}
.abyssItemInfo .skillItem {
  color: #1c6792;
  border-bottom: 0.02rem solid #1c6792;
}
.abyssItemInfo .btn {
  width: 1.4rem;
  height: 0.5rem;
  margin-bottom: 0.2rem;
  background-color: #ffffff;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .6);
  margin: 0.08rem 0.06rem;
  color: #000000;
  font-size: 0.24rem;
}#abyss .list {
  margin: 0 auto;
}
#abyss .list .abyssItemWrap {
  margin-bottom: 0;
  padding: 0.05rem 0;
}
#abyss .list .abyssItemWrap.active {
  background-color: rgba(136, 220, 241, .489);
}
#abyss .list .cardIcon {
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 0.1rem #000;
  margin: 0.1rem;
}
#abyss .list .emptyCardItem {
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 0.1rem #000 inset;
  margin: 0.1rem;
  font-size: 0.9rem;
  color: #ede0e0;
  font-family: "cardIcon";
}
#abyss .list .posName {
  margin-top: 0.1rem;
  color: #fff;
}
#abyss .info {
  width: 6.7rem;
  height: 3rem;
  background-color: rgb(136, 220, 241);
  padding: 0.1rem 0 0.1rem 0.1rem;
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .8);
  border: 0.12rem solid rgba(0, 0, 0, .1);
  margin-top: 0.5rem;
}
#abyss .info .infoTip {
  color: #666;
}
#abyss .info .infoTip span {
  color: rgb(12, 12, 14);
}
#abyss .info .infoTitle {
  text-align: center;
}
#abyss .strBtn {
  width: 1rem;
  height: 0.45rem;
  box-shadow: 0 0 0.1rem #000;
  font-size: 0.24rem;
}#replaceAbyssItem {
  width: 7.2rem;
  height: 11rem;
  box-sizing: content-box;
  position: relative;
  background-color: #06342c;
}
#replaceAbyssItem .title {
  text-align: center;
}
#replaceAbyssItem .list {
  width: 6.9rem;
  position: relative;
  height: 10rem;
  overflow: auto;
  z-index: 1;
  margin: 0.1rem auto;
}#abyssSync {
  width: 100%;
}
#abyssSync .tips {
  margin: 0.2rem auto;
}
#abyssSync .petItemWrap {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0.5rem;
  border: 0.04rem dashed #99b5b5;
  position: relative;
  color: #99b5b5;
}
#abyssSync .syncTip {
  text-align: center;
  font-size: 0.22rem;
  color: #43bddb;
  margin-bottom: 0.35rem;
  margin-top: 0.25rem;
}
#abyssSync .abyssItem {
  margin: 0 auto;
}
#abyssSync .subPets .abyssItem {
  margin: 0 0.5rem;
}
#abyssSync .needs {
  height: 1.5rem;
}
#abyssSync .syncBtn {
  width: 1.5rem;
  height: 0.5rem;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 0.1rem #000;
}#replaceAbyssSyncItem {
  width: 7.2rem;
  height: 11rem;
  box-sizing: content-box;
  position: relative;
  background-color: #06342c;
}
#replaceAbyssSyncItem .title {
  text-align: center;
}
#replaceAbyssSyncItem .list {
  width: 6.9rem;
  position: relative;
  height: 10rem;
  overflow: auto;
  z-index: 1;
  margin: 0.1rem auto;
}#formation .tip {
  color: rgb(247, 255, 204);
  font-size: 0.22rem;
  margin-top: 0.1rem;
}
#formation .formationItem {
  width: 2rem;
  height: 1.4rem;
  margin: 0.1rem auto;
  padding-top: 0.1rem;
  border: 0.12rem double rgb(161, 187, 213);
  position: relative;
  background-color: rgba(33, 158, 212, .8);
}
#formation .formationItem .formationName {
  background-size: 0.25rem 0.25rem;
  color: #fff;
}
#formation .formationItem .foramtionIcon {
  font-size: 0.8rem;
}
#formation .formationItem .formationlvl {
  color: #fff;
  font-size: 0.24rem;
  width: 0.8rem;
  text-align: center;
  background-color: #41dee6;
  border-radius: 0.08rem;
  margin: 0.1rem 0.05rem 0.05rem;
}
#formation .formationItem.show {
  background-color: rgb(66, 176, 223);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .568627451);
}
#formation .formationContent {
  width: 6.7rem;
  height: 5.5rem;
  background-color: rgba(8, 74, 70, .9);
  margin-bottom: 0.1rem;
}
#formation .formationContent .formationContentTitle {
  margin-top: 0.1rem;
  font-size: 0.3rem;
  color: #fff;
}
#formation .formationTuPo {
  width: 6.7rem;
  height: 2.2rem;
  background-color: #1ec8a3;
  background-image: url("https://www.transparenttextures.com/patterns/soft-kill.png");
  border: 0.08rem solid #09455c;
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
#formation .formationTuPo .titleName {
  color: #fff;
}
#formation .formationTuPo .formationLvl {
  width: 3rem;
  background-color: rgba(186, 210, 212, .4470588235);
  margin: 0.03rem;
  position: relative;
  font-size: 0.22rem;
  height: 0.36rem;
}
#formation .formationTuPo .formationLvlContent {
  background-color: #69bdf0;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}
#formation .formationTuPo .lvlText {
  position: relative;
  z-index: 2;
  padding: 0 0.2rem;
  height: 100%;
  width: 100%;
}
#formation .formationTuPo .formationTip {
  color: #ecf5ff;
  font-size: 0.22rem;
}
#formation .btns {
  width: 100%;
}
#formation .useWrap {
  height: 0.5rem;
}
#formation .useBtn {
  width: 1.3rem;
  height: 0.4rem;
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .7);
  background-color: rgb(33, 158, 212);
  color: #ffffff;
  margin-top: 0.15rem;
  border-radius: 0.3rem;
}
#formation .useText {
  width: 1.3rem;
  height: 0.4rem;
  font-size: 0.22rem;
  color: rgb(255, 255, 255);
}
#formation .attris {
  padding-top: 0.1rem;
}
#formation .attris .attriLine {
  width: 6rem;
  height: 0.5rem;
  margin: 0 auto 0.15rem;
  padding-left: 0.2rem;
  background-color: rgb(151, 212, 247);
}
#formation .attris .attriLine .attriTitle {
  margin-right: 0.3rem;
  color: rgb(111, 12, 154);
}
#formation .attris .attriLine .attirItem {
  font-size: 0.22rem;
  margin-right: 0.1rem;
  min-width: 1.3rem;
  color: rgb(0, 0, 0);
}#formationMain .titleTab {
  width: 1.6rem;
  height: 0.45rem;
  font-size: 0.28rem;
  border-bottom: 0.02rem solid #000000;
}
#formationMain .titleTab.active {
  background-color: #000000;
  color: #ffffff;
}
#formationMain .formationMainContent {
  height: 10.6rem;
}#teamList {
  width: 6.5rem;
  height: 7.3rem;
}
#teamList .getAngerContent {
  margin-top: 0.3rem;
  color: rgb(37, 108, 175);
}
#teamList .labelTitle {
  margin-bottom: 0.1rem;
  width: 5.8rem;
}
#teamList .line {
  width: 5rem;
  height: 0.01rem;
  border: 0.01rem dashed rgba(255, 255, 255, .5529411765);
}
#teamList .partnerItem {
  width: 1rem;
  height: 1.3rem;
  box-shadow: 0 0 0.1rem rgba(1, 128, 150, .5725490196);
  font-size: 0.2rem;
  margin: 0.1rem 0.15rem;
  color: #000;
  background-color: rgba(1, 128, 150, .5725490196);
}
#teamList .partnerItem .monsterIcon {
  width: 0.7rem;
  height: 0.7rem;
  font-size: 0.7rem;
  color: #fff;
}
#teamList .partnerItem .monsterImg {
  width: 0.7rem;
  height: 0.7rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#teamList .partnerItem.active {
  background-color: rgb(13, 151, 236);
}
#teamList .partnerItem .speedBtn {
  margin-top: 0.1rem;
  padding: 0.03rem 0.15rem;
  box-shadow: 0 0 0.1rem #000;
  background-color: #000;
  color: #fff;
}

#selectSpeed {
  width: 4rem;
  height: 2rem;
  background-color: #000;
  box-shadow: 0 0 0.1rem rgba(1, 128, 150, .5725490196);
}
#selectSpeed .speedBtn {
  margin: 0.15rem;
  padding: 0.03rem 0.15rem;
  box-shadow: 0 0 0.1rem #5fd6e5;
  background-color: #000;
  color: #fff;
}.building {
  box-shadow: 0 0 0.2rem #000;
}
.building .item {
  width: 2rem;
  height: 1rem;
  margin: 0.1rem;
  border: 0.02rem solid #000;
}
.building .item.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
}
.building .list {
  height: 8.15rem;
  overflow: auto;
}
.building .buildinfo {
  width: 6.5rem;
  height: 4.5rem;
  padding-top: 0.2rem;
}
.building .buildinfo .name {
  font-size: 0.3rem;
  margin-bottom: 0.1rem;
}
.building .buildinfo .desc {
  height: 0.4rem;
  color: #9ff48e;
}
.building .buildinfo .needs {
  height: 2.8rem;
}
.building .buildinfoContent {
  height: 2rem;
}
.building .btn {
  width: 1.5rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem rgba(206, 200, 200, .6901960784);
}.abView {
  width: 5rem;
  height: 5.5rem;
  background-color: #fff;
}
.abView .info {
  margin-bottom: 0.15rem;
}
.abView .times {
  margin-bottom: 0.1rem;
}
.abView .adIcon {
  font-size: 0.4rem;
  margin-right: 0.05rem;
}
.abView .btn {
  box-shadow: 0 0 0.1rem #000;
  min-width: 1.8rem;
  height: 0.55rem;
  padding: 0 0.15rem;
  margin-bottom: 0.4rem;
}
.abView .line {
  background: url("./line4-25218568.png") center center/100% 100% no-repeat;
  width: 3.5rem;
  height: 0.02rem;
  margin: 0.4rem auto;
}
.abView .battleResult {
  margin-bottom: 0.2rem;
}#map .mapItem {
  position: relative;
  width: 6rem;
  height: 1rem;
  border: 0.14rem double rgb(133, 133, 133);
  margin: 0.1rem auto;
  color: rgb(255, 255, 255);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
#map .mapItem .name {
  font-size: 0.3rem;
  position: relative;
  z-index: 2;
}
#map .mapItem.active {
  color: #ffffff;
  box-shadow: 0 0 0.15rem rgb(0, 0, 0);
}
#map .mapItem .adventureState {
  position: absolute;
  color: red;
  bottom: 0.3rem;
  z-index: 2;
}
#map .mapItem .floor {
  position: relative;
  z-index: 2;
}
#map .auto {
  background-color: rgb(149, 233, 240);
  border-radius: 0.1rem;
  height: 0.5rem;
  width: 2.2rem;
  padding-left: 0.1rem;
  margin: 0.1rem 0.06rem;
}
#map .addIcon {
  width: 0.34rem;
  height: 0.34rem;
  margin-left: 0.08rem;
  box-shadow: 0 0 0.04rem #000;
  border-radius: 50%;
  font-size: 0.2rem;
  background-color: rgb(87, 132, 192);
  color: rgb(255, 255, 255);
}
#map .tipIcon {
  width: 0.34rem;
  height: 0.34rem;
  margin-left: 0.08rem;
  box-shadow: 0 0 0.04rem #000;
  border-radius: 50%;
  font-size: 0.2rem;
  background-color: rgb(87, 132, 192);
  color: rgb(255, 255, 255);
}
#map .mapList {
  height: 8.5rem;
  width: 6.7rem;
  overflow: auto;
}.mapInfo {
  width: 6.7rem;
  height: 3.2rem;
  background-color: #323333;
  padding: 0.1rem 0 0.1rem 0.2rem;
  box-shadow: 0 0 0.08rem rgb(0, 0, 0);
  border: 0.12rem solid rgba(0, 0, 0, .4);
}
.mapInfo .name {
  font-size: 0.34rem;
  color: rgb(118, 207, 246);
}
.mapInfo .name .mapNameIcon {
  margin-right: 0.05rem;
}
.mapInfo .name span {
  font-size: 0.24rem;
}
.mapInfo .adventureInfo {
  margin-left: 0.1rem;
  color: red;
  font-size: 0.22rem;
}
.mapInfo .info {
  height: 1.6rem;
}
.mapInfo .infoItem {
  font-size: 0.24rem;
}
.mapInfo .firstGet {
  color: rgb(255, 255, 255);
}
.mapInfo .itemText {
  font-size: 0.24rem;
}
.mapInfo .btn {
  padding: 0 0.2rem;
  height: 0.55rem;
  box-shadow: 0 0 0.1rem #000;
  font-size: 0.22rem;
}
.mapInfo .battleBtn {
  color: rgb(255, 255, 255);
}
.mapInfo .lookBtn {
  width: 2rem;
  height: 0.55rem;
  box-shadow: 0 0 0.1rem #000;
  font-size: 0.22rem;
}
.mapInfo .btnIcon {
  font-size: 0.32rem;
  margin-right: 0.07rem;
}
.mapInfo .btns {
  width: 100%;
}#hire {
  color: #fff;
}
#hire .title {
  font-weight: bold;
  margin: 0.1rem 0;
  font-size: 0.35rem;
  color: #78b7f3;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(220,22,22,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.15rem #dc1616);
          filter: drop-shadow(0 0 0.15rem #dc1616);
}
#hire .item {
  width: 1.8rem;
  height: 1.5rem;
  margin: 0.1rem 0.1rem;
  background-color: rgba(50, 165, 207, .404);
  color: rgb(255, 255, 255);
  position: relative;
}
#hire .item .partnerImg {
  width: 0.9rem;
  height: 0.9rem;
}
#hire .item .monsterIcon {
  font-size: 0.8rem;
  text-shadow: 0 0 0.1rem #000, 0 0 0.2rem #000;
}
#hire .item .monsterImg {
  width: 1rem;
  height: 1rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#hire .item.active {
  box-shadow: 0 0 0.1rem rgba(161, 161, 161, .4509803922);
  color: rgb(255, 255, 255);
  border: 0.06rem solid rgb(140, 198, 241);
}
#hire .item.active::before {
  position: absolute;
  content: "";
  border-top: 0.16rem solid transparent;
  border-bottom: 0.16rem solid transparent;
  border-left: 0.16rem solid rgb(140, 198, 241);
  right: 0.05rem;
  top: -0.04rem;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#hire .desc {
  color: #fff;
}
#hire .skill {
  width: 6.7rem;
  margin: 0.1rem 0;
  padding: 0.15rem 0.15rem 0.1rem 0;
  height: 1.5rem;
  background-color: rgba(196, 224, 246, .733);
  border: 0.04rem solid rgb(140, 198, 241);
  font-size: 0.22rem;
}
#hire .skill .skillIcon {
  width: 1rem;
  height: 100%;
  font-size: 0.7rem;
}
#hire .skill .skillIcon {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.6rem;
  margin: 0 0.1rem;
  background-color: #094846;
}
#hire .skill .skillIcon::before {
  position: absolute;
  content: "\ea7c";
  font-family: "iconfont";
  font-size: 0.9rem;
}
#hire .skill .skillName {
  margin-bottom: 0.05rem;
  font-size: 0.3rem;
  color: #000000;
}
#hire .skill .skillContent {
  height: 100%;
}
#hire .skill .skillDesc {
  color: #3a3a3a;
}
#hire .btn {
  width: 2rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem #ffffff;
  margin-top: 0.2rem;
}.partnerList .partnerItem {
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .6509803922);
  font-size: 0.18rem;
  margin: 0 0.07rem;
  color: #ffffff;
  background-color: rgb(190, 218, 243);
  border-radius: 0.2rem;
}
.partnerList .partnerItem .monsterIcon {
  width: 0.8rem;
  height: 0.8rem;
  font-size: 0.7rem;
  text-shadow: 0 0 0.1rem rgba(255, 255, 255, .537254902);
}
.partnerList .partnerItem .monsterIcon.partnerType1 {
  color: rgb(91, 129, 243);
}
.partnerList .partnerItem .monsterImg {
  width: 0.75rem;
  height: 0.75rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
  margin-bottom: 0.1rem;
}
.partnerList .partnerItem.active {
  background-color: rgb(237, 248, 255);
}
.partnerList .partnerItem .partnerItemlvl {
  color: #333;
}
.partnerList .partnerItem .partnerItemName {
  margin-right: 0.05rem;
}
.partnerList .hireBtn {
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .6509803922);
  font-size: 0.28rem;
  margin: 0 0.07rem;
  color: #000000;
  background-color: rgb(190, 218, 243);
  border-radius: 0.2rem;
}#attriStr {
  width: 7.2rem;
  height: 12.5rem;
  background-color: rgb(255, 255, 255);
  position: relative;
  box-sizing: border-box;
}
#attriStr .tips {
  margin: 0.05rem auto;
  padding-left: 0.1rem;
}
#attriStr .tips .tip {
  color: rgb(77, 234, 161);
  font-size: 0.24rem;
}
#attriStr .title {
  color: #000;
  line-height: 0.7rem;
  font-size: 0.3rem;
}
#attriStr .titleIcon {
  height: 0.4rem;
  width: 1.13rem;
  margin: 0 0.1rem;
  background: url("./titile3-65d46b9a.png") center center/100% 100% no-repeat;
}
#attriStr .item {
  height: 0.65rem;
  width: 6.2rem;
  background-color: rgb(228, 242, 248);
  margin: 0.1rem auto;
  padding: 0 0.2rem;
}
#attriStr .item .itemName {
  width: 2.6rem;
  font-size: 0.24rem;
}
#attriStr .attriText {
  font-size: 0.22rem;
  text-align: left;
  color: rgb(30, 97, 159);
}
#attriStr .lvlupBtn {
  width: 1.1rem;
  height: 0.4rem;
  box-shadow: 0 0 0.1rem rgb(97, 97, 97);
}.partnerInfo {
  width: 100%;
}
.partnerInfo .partnerInfoTitle {
  height: 0.5rem;
  font-size: 0.32rem;
  color: #D6CA24;
}
.partnerInfo .content .attriTitle {
  margin: 0 auto;
  color: #fff;
}
.partnerInfo .content .attriTitle span {
  font-size: 0.2rem;
}
.partnerInfo .content .attriTitle .attriTitleIcon {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: invert(100%);
          filter: invert(100%);
  background-size: 100% 100%;
}
.partnerInfo .content .partnerDesc {
  width: 80%;
  margin: 0.02rem auto;
  padding: 0.04rem;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 0.1rem #000000;
}
.partnerInfo .content .skills {
  height: 0.6rem;
}
.partnerInfo .content .line {
  width: 5.1rem;
  height: 0.2rem;
  margin: 0.05rem auto;
  background: url("./line8-7cd3fe3e.png") no-repeat center center;
  background-size: 100% 100%;
}
.partnerInfo .content .attriList {
  background-color: #051d2f;
}
.partnerInfo .content .attriItem {
  color: #61efff;
  margin: 0.04rem 0.06rem;
  width: 1.7rem;
  border-radius: 0.05rem;
  height: 0.45rem;
  font-size: 0.2rem;
}
.partnerInfo .content .attriItem .attriName {
  padding-left: 0.1rem;
  width: 1rem;
  font-weight: bold;
  font-size: 0.22rem;
}
.partnerInfo .content .attriItem .attriValue {
  text-align: left;
  color: #ff0000;
}
.partnerInfo .content .skillItem {
  border: 0.02rem solid #989d9b;
  color: #3c4442;
  margin: 0.03rem 0.05rem;
  min-width: 1.2rem;
  padding: 0 0.1rem;
  border-radius: 0.05rem;
  height: 0.45rem;
  font-size: 0.2rem;
  color: #fff;
  background-color: rgb(105, 105, 105);
}
.partnerInfo .content .emptyattriItem {
  width: 1.7rem;
  height: 0.45rem;
  margin: 0.03rem 0;
}
.partnerInfo .content .more {
  position: relative;
  background-color: #969c9b;
  color: #000;
}
.partnerInfo .content .more::before {
  position: absolute;
  content: "";
  right: -0.12rem;
  top: -0.12rem;
  border-radius: 50%;
  background-color: red;
  width: 0.24rem;
  height: 0.24rem;
}
.partnerInfo .divideLine {
  width: 6.8rem;
  height: 0.02rem;
  background-color: #fff;
  margin: 0.1rem auto;
}#partnerStar {
  width: 7.3rem;
  height: 12rem;
}
#partnerStar .attris {
  width: 7rem;
  height: 4rem;
}
#partnerStar .attriItem {
  color: #ffffff;
  margin: 0.06rem 0.08rem;
  width: 2.1rem;
  border-radius: 0.05rem;
  height: 0.5rem;
  font-size: 0.22rem;
  background-color: rgba(17, 76, 86, .967);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .195);
}
#partnerStar .attriItem .attriName {
  padding-left: 0.1rem;
  width: 1rem;
}
#partnerStar .attriItem .attriValue {
  text-align: center;
}#partnerBaseAttri .tip {
  color: rgb(77, 234, 161);
  font-size: 0.24rem;
}
#partnerBaseAttri .item {
  width: 7.1rem;
  height: 0.55rem;
  background-color: rgba(139, 236, 200, .8);
  margin-top: 0.05rem;
}
#partnerBaseAttri .item .itemContent {
  padding-left: 0.15rem;
}
#partnerBaseAttri .itemDesc {
  height: 0.5rem;
  width: 100%;
  font-size: 0.2rem;
  color: rgb(24, 25, 26);
  padding-left: 0.1rem;
}
#partnerBaseAttri .itemDesc .getItem {
  margin-left: 0.1rem;
}
#partnerBaseAttri .attriName {
  width: 0.8rem;
}
#partnerBaseAttri .attriValue {
  width: 0.6rem;
}
#partnerBaseAttri .btn {
  width: 0.65rem;
  height: 0.45rem;
  margin: 0 0.15rem;
  background-color: rgb(237, 237, 237);
  box-shadow: 0 0 0.1rem #999;
  color: #000;
  font-size: 0.24rem;
}
#partnerBaseAttri .needs {
  font-size: 0.22rem;
  margin-top: 0.15rem;
  color: #fff;
}
#partnerBaseAttri .lvlBtn,
#partnerBaseAttri .resetBtn {
  width: 1rem;
  height: 0.45rem;
  margin: 0 0.2rem;
  background-color: rgb(237, 237, 237);
  box-shadow: 0 0 0.1rem #999;
  color: #000;
}
#partnerBaseAttri .maxLvl {
  width: 1rem;
  height: 0.45rem;
  margin: 0 0.2rem;
  color: #eb2121;
}
#partnerBaseAttri .btns {
  margin-top: 0.05rem;
}
#partnerBaseAttri .emptybtn {
  width: 0.55rem;
  height: 0.45rem;
  margin: 0 0.2rem;
}#partnerMain .title {
  text-align: center;
  line-height: 0.7rem;
}
#partnerMain .partnerMainContent {
  width: 7.35rem;
  height: 9.3rem;
  position: relative;
}
#partnerMain .partnerMainContent .partnerMainContent2 {
  padding: 0.06rem;
}
#partnerMain .baseAttri {
  width: 7.2rem;
  height: 0.38rem;
  font-size: 0.24rem;
}
#partnerMain .baseAttri .lvl {
  width: 3rem;
}
#partnerMain .baseAttri .attriName {
  width: 1.8rem;
  text-align: center;
}
#partnerMain .baseAttri .exp .attriValue {
  position: relative;
  text-align: center;
}
#partnerMain .baseAttri .exp .attriValue .expText {
  position: relative;
  width: 100%;
  z-index: 2;
}
#partnerMain .baseAttri .exp .attriValue .expBg {
  position: absolute;
  height: 100%;
  left: 0;
  background-color: #a7a7a7;
  top: 0;
  z-index: 1;
}#rank .contentTitle {
  width: 6.2rem;
  margin: 0.1rem auto 0.15rem;
  height: 0.4rem;
  font-size: 0.24rem;
  color: #fff;
}
#rank .list {
  height: 9.2rem;
  width: 6.4rem;
  overflow-y: auto;
}
#rank .list .item {
  font-size: 0.22rem;
  width: 6.4rem;
  height: 0.55rem;
  margin: 0 auto 0.15rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .2);
  border: 0.12rem solid rgba(255, 255, 255, .1);
  color: #fff;
}
#rank .list .lookBtn {
  width: 0.6rem;
  height: 0.35rem;
  background-color: rgb(216, 207, 207);
  font-size: 0.2rem;
  color: #555;
  box-shadow: 0 0 0.05rem #555;
}
#rank .userID {
  color: #999;
  font-size: 0.18rem;
}
#rank .myData {
  font-size: 0.24rem;
  text-align: center;
  margin-top: 0.05rem;
}#resource .list {
  height: 9rem;
}
#resource .farmerAmount {
  margin: 0.2rem;
  padding: 0.1rem 0.2rem;
  background-color: #15979e;
  border-radius: 0.2rem;
}
#resource .name {
  font-size: 0.3rem;
}
#resource .btns {
  height: 1.2rem;
}
#resource .btns .btn {
  width: 1.7rem;
  height: 0.55rem;
  box-shadow: 0 0 0.1rem #15979e;
  margin: 0 0.2rem;
  background-color: rgb(115, 136, 34);
}
#resource .btns .btn.cancel {
  background-color: rgb(202, 249, 14);
  color: #000;
}
#resource .btns .btn.submit {
  background-color: rgb(92, 165, 224);
}
#resource .item {
  width: 3.2rem;
  height: 2rem;
  border: 0.12rem double rgb(161, 187, 213);
  background-color: rgba(8, 74, 70, .9);
  border-radius: 0;
  margin: 0.1rem 0.15rem;
  font-size: 0.24rem;
  padding-top: 0.1rem;
  color: #fff;
}
#resource .item .btn {
  width: 0.55rem;
  height: 0.45rem;
  margin: 0 0.15rem;
  box-shadow: 0 0 0.08rem #000000;
  background-color: #2a9fc9;
  color: #fff;
}
#resource .item .btn.active {
  opacity: 1;
}
#resource .item .efficient {
  width: 90%;
  border-radius: 0.1rem;
  padding: 0.05rem 0.08rem;
  text-align: center;
  color: #37cf23;
  font-size: 0.22rem;
}
#resource .item .itemFarmerAmount {
  margin: 0.05rem;
  background-color: #15979e;
  padding: 0.05rem 0.08rem;
  border-radius: 0.1rem;
}
#resource .lvlupBtn {
  width: 1.8rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem rgba(106, 167, 198, .6901960784);
  background-color: rgba(106, 167, 198, .6901960784);
}
#resource .lvlupBtn .icon {
  font-size: 0.36rem;
}#menu {
  width: 100%;
}
#menu .menuList {
  width: 100%;
  height: 0.8rem;
}
#menu .menuContent {
  height: 7.3rem;
  position: relative;
}
#menu .homeBtn {
  width: 0.95rem;
  height: 0.6rem;
  font-size: 0.24rem;
  text-align: center;
  position: relative;
  z-index: 3;
  margin: 0.05rem 0.05rem;
  background-color: rgba(0, 0, 0, .1);
  border-top-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  box-shadow: 0 0 0.1rem rgba(129, 200, 236, .2);
}
#menu .homeBtn.active {
  background-color: #167ed4;
  color: #ffffff;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
#menu .homeBtn span {
  font-size: 0.14rem;
}
#menu .menuHide {
  position: absolute;
  right: 0;
  left: 0;
  -webkit-transition: 0.4s -webkit-transform;
  transition: 0.4s -webkit-transform;
  transition: 0.4s transform;
  transition: 0.4s transform, 0.4s -webkit-transform;
  width: 5.8rem;
  height: 5.85rem;
  background: rgba(55, 55, 55, .6);
  background-image: url("./asfalt-light-3d9337fe.png");
  box-shadow: 0 0 0.15rem 0 rgba(0, 0, 0, .662745098);
  border-radius: 0.05rem;
}
#menu .menuHide3 {
  position: absolute;
  right: 0;
  left: 0;
  -webkit-transition: 0.4s -webkit-transform;
  transition: 0.4s -webkit-transform;
  transition: 0.4s transform;
  transition: 0.4s transform, 0.4s -webkit-transform;
  width: 5.8rem;
  height: 5.85rem;
  box-shadow: 0 0 0.15rem 0 rgba(0, 0, 0, .662745098);
  border-radius: 0.05rem;
}
#menu .menuHide2 {
  position: absolute;
  right: 0;
  left: 0;
  -webkit-transition: 0.4s -webkit-transform;
  transition: 0.4s -webkit-transform;
  transition: 0.4s transform;
  transition: 0.4s transform, 0.4s -webkit-transform;
  width: 5.8rem;
  height: 5.85rem;
}
#menu .showActive {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
#menu .hideActive {
  -webkit-transform: translateX(7rem);
          transform: translateX(7rem);
}#study .item {
  width: 5rem;
  height: 0.7rem;
  margin: 0.2rem;
  border: 0.12rem double rgb(161, 187, 213);
  background-color: rgba(78, 233, 233, .774);
}
#study .item.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
  color: #000;
}
#study .label {
  color: #fff;
}
#study .completeItem {
  width: 2.8rem;
  height: 0.6rem;
  margin: 0.1rem;
  border: 0.02rem solid #000;
}
#study .completeItem.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
}
#study .ingContent {
  height: 8.5rem;
}
#study .list {
  width: 6.5rem;
  height: 6.2rem;
  overflow: auto;
}
#study .info {
  width: 6rem;
  height: 2.2rem;
  margin: 0.1rem auto;
  padding: 0.1rem;
  background-color: #cbebf9;
  color: #333;
}
#study .info .name {
  font-size: 0.3rem;
}
#study .info .desc {
  height: 0.9rem;
  color: #474512;
  margin-top: 0.1rem;
  font-size: 0.24rem;
}
#study .info .needs {
  height: 1rem;
}
#study .refreshBtn {
  width: 2.2rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  box-shadow: 0 0 0.1rem rgb(37, 33, 33);
  background-color: rgba(114, 173, 229, .8117647059);
}
#study .btn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(209, 209, 209, .6901960784);
}#make .farmerMakeItem {
  font-size: 0.24rem;
}
#make .farmerMakeItem .btn {
  width: 0.55rem;
  height: 0.5rem;
  margin: 0.05rem 0.05rem;
  box-shadow: 0 0 0.04rem #000;
  opacity: 0.3;
}
#make .farmerMakeItem .btn.active {
  opacity: 1;
}
#make .farmerMakeItem .efficient {
  margin: 0.05rem;
  background-color: #a0ccce;
  border-radius: 0.1rem;
  padding: 0.05rem 0.08rem;
}
#make .farmerMakeItem .itemFarmerAmount {
  margin: 0.05rem;
  background-color: #a0ccce;
  padding: 0.05rem 0.08rem;
  border-radius: 0.1rem;
}
#make .makeBtns {
  height: 0.6rem;
  margin-top: 0.1rem;
}
#make .makeBtns .btn {
  width: 1.4rem;
  height: 0.5rem;
  margin: 0.05rem 0.1rem;
  box-shadow: 0 0 0.1rem rgb(121, 120, 120);
}
#make .makeFlame {
  position: absolute;
  top: 1rem;
  font-size: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  left: 50%;
  margin-left: -0.2rem;
  color: rgb(0, 0, 0);
  text-shadow: 0 0 0.1rem rgba(0, 0, 0, .52);
}
#make .farmerAmount {
  margin: 0.1rem 0.1rem;
  padding: 0.1rem 0.2rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
}
#make .needsTitle {
  margin-top: 0.5rem;
}
#make .needs {
  margin-bottom: 0.5rem;
}
#make .makeContent {
  position: relative;
  z-index: 1;
  width: 6.5rem;
  height: 7.5rem;
  margin: 0.1rem;
  border: 0.1rem double #000;
}
#make .makeAmountWrap {
  height: 0.5rem;
}
#make .makeAmount {
  width: 0.8rem;
  height: 0.35rem;
  background-color: #000000;
  box-shadow: 0 0 0.1rem #000;
  color: #fff;
  border-radius: 0.08rem;
}
#make .name {
  height: 0.5rem;
  font-size: 0.3rem;
  text-shadow: 0 0 0.15rem rgb(255, 0, 0);
}
#make .lvl {
  font-size: 0.22rem;
  background-color: rgba(255, 0, 0, .3);
  padding: 0.03rem 0.15rem;
  border-radius: 0.08rem;
}
#make .makeInfoList {
  width: 5.5rem;
  background-color: #d0eafd;
  padding: 0.1rem;
}
#make .makeInfoList .makeInfoItem {
  width: 2.5rem;
  font-size: 0.22rem;
}
#make .makeBtn,
#make .makeBtn2 {
  width: 4.7rem;
  height: 0.74rem;
  color: #4679c4;
  font-size: 0.3rem;
  margin-top: 0;
  background: url("./button-b4c30edc.png") center center no-repeat;
  background-size: 100% 100%;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#make .makeBtn .makeIcon,
#make .makeBtn2 .makeIcon {
  margin: 0 0.25rem;
  font-size: 0.32rem;
}
#make .makeBtn .makeIcon.right,
#make .makeBtn2 .makeIcon.right {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
#make .makeBtn {
  -webkit-animation: ds 1s infinite alternate;
          animation: ds 1s infinite alternate;
}
@-webkit-keyframes ds {
  from {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 0 0 #000);
            filter: drop-shadow(0 0 0 #000);
  }
  to {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 0 0.2rem #000);
            filter: drop-shadow(0 0 0.2rem #000);
  }
}
@keyframes ds {
  from {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 0 0 #000);
            filter: drop-shadow(0 0 0 #000);
  }
  to {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 0 0.2rem #000);
            filter: drop-shadow(0 0 0.2rem #000);
  }
}
#make .makeBtn2 {
  color: rgb(255, 0, 0);
  text-shadow: 0 0 0.1rem rgb(255, 255, 255);
}
#make .lvlBtn {
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(0, 0, 0, .848);
  border: 0.08rem solid rgb(220, 80, 29);
  margin-top: 0;
  margin-bottom: 0.1rem;
  font-size: 0.55rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.15rem rgb(0, 0, 0);
  color: rgb(193, 10, 10);
}
#make .lvlBtn .makeLvlupImg {
  width: 100%;
  height: 100%;
  background-size: 70% 70%;
}
#make .progress {
  width: 4.5rem;
  height: 0.5rem;
  position: relative;
  border: 0.01rem solid #000;
}
#make .progress .progressHp {
  position: absolute;
  background-color: rgba(46, 143, 199, .711);
  width: 0%;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1;
}
#make .progress .progressText {
  width: 100%;
  height: 100%;
  z-index: 2;
}#equipmentStr {
  height: 10.5rem;
}
#equipmentStr .partItem {
  width: 1.5rem;
  height: 0.8rem;
  background-color: rgb(71, 87, 92);
  margin: 0.2rem;
  color: #ffffff;
}
#equipmentStr .partItem.active {
  background-color: rgb(94, 199, 231);
  color: #fff;
}
#equipmentStr .needs {
  height: 3rem;
}
#equipmentStr .needs .need {
  height: 0.5rem;
}
#equipmentStr .labeltitle {
  color: #fff;
}#makehl .tips {
  font-size: 0.22rem;
}
#makehl .needTip {
  margin-top: 0.2rem;
}
#makehl .needTip .needTipLine {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  background-size: 100% 100%;
}
#makehl .putItems {
  width: 6.5rem;
  margin-top: 0.1rem;
}
#makehl .putItems .item {
  width: 2.3rem;
  height: 1.5rem;
  margin: 0.1rem 0.3rem;
}
#makehl .putItems .item .itemContent {
  width: 100%;
  height: 0.9rem;
  position: relative;
  box-shadow: 0 0 0.2rem #000 inset;
  font-size: 0.26rem;
}
#makehl .putItems .item .itemContent .itemContentBg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  opacity: 0.4;
  z-index: 0;
}
#makehl .putItems .item .itemContent .addText {
  font-size: 0.4rem;
}
#makehl .putItems .item .label {
  margin-top: 0.06rem;
  color: rgba(0, 0, 0, .713);
}
#makehl .putItems .item:nth-child(5) {
  width: 3rem;
}
#makehl .putItems .itemValue {
  font-size: 0.2rem;
}
#makehl .makeItemList {
  width: 100%;
  height: 1.4rem;
}
#makehl .needs {
  margin-top: 0.1rem;
  height: 2.2rem;
}
#makehl .itemName {
  text-shadow: 0 0 0.08rem #000;
  font-size: 0.28rem;
}
#makehl .itemAmount {
  width: 1rem;
  background-color: #000000;
  box-shadow: 0 0 0.1rem rgb(47, 47, 47);
  height: 0.4rem;
  border-radius: 0.08rem;
  color: #fff;
}
#makehl .itemAmountDecorate {
  margin-top: 0.1rem;
  width: 1.6rem;
  height: 0.44rem;
  background: url("./18-67d86c11.png") center center/100% 100% no-repeat;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#makehl .selectMakeItemBtn,
#makehl .putInBagBtn {
  margin: 0.1rem auto;
  padding: 0 0.2rem;
  height: 0.4rem;
  background-color: rgb(114, 175, 219);
  box-shadow: 0 0 0.1rem #000;
}
#makehl .btns {
  margin-top: 0.3rem;
}
#makehl .btns .btn {
  width: 1.9rem;
  height: 0.6rem;
  background-color: rgb(0, 0, 0);
  margin: 0 0.15rem;
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0.1rem #000;
}#makeHLItemList {
  width: 5rem;
  min-height: 7rem;
}
#makeHLItemList .list {
  margin-top: 0.2rem;
  height: 6rem;
  overflow: auto;
  margin-bottom: 0.2rem;
}
#makeHLItemList .list .item {
  width: 4rem;
  margin-bottom: 0.05rem;
  height: 0.5rem;
  padding-left: 0.2rem;
  border: 0.01rem solid #cbcbcb;
}
#makeHLItemList .list .item.active {
  background-color: #b1deef;
}
#makeHLItemList .desc {
  padding: 0.15rem;
  font-size: 0.22rem;
  border-radius: 0.08rem;
  background-color: #b1deef;
}
#makeHLItemList .desc .btn {
  width: 1rem;
  height: 0.45rem;
  color: rgb(0, 0, 0);
  box-shadow: 0 0 0.07rem #191919;
}
#makeHLItemList .descText {
  width: 4rem;
  height: 1.5rem;
}
#makeHLItemList .clearBtnWrap {
  height: 0.6rem;
}
#makeHLItemList .clearBtn {
  width: 2.2rem;
  height: 0.5rem;
  box-shadow: 0 0 0.07rem #191919;
  background-color: rgb(186, 211, 238);
  margin-top: 0.2rem;
}#makeHlMain .titleTab {
  margin-top: 0.2rem;
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.3rem;
  border-bottom: 0.04rem solid #63bad7;
}
#makeHlMain .titleTab.active {
  background-color: #63bad7;
  color: #ffffff;
}#makeInfo .tips {
  margin: 0.05rem auto;
}
#makeInfo .tips .tip {
  color: rgb(77, 234, 161);
  font-size: 0.22rem;
}
#makeInfo .makeItem {
  width: 6.1rem;
  margin-bottom: 0.2rem;
}
#makeInfo .makeItem .makeItemContent {
  height: 7.5rem;
  padding-bottom: 0.2rem;
}
#makeInfo .titleTab {
  width: 1rem;
  height: 1.2rem;
  margin: 0.1rem;
  border: 0.02rem solid #000;
}
#makeInfo .titleTab.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
}
#makeInfo .title {
  color: rgb(0, 0, 0);
  line-height: 0.7rem;
  font-size: 0.3rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#makeInfo .titleIcon {
  height: 0.4rem;
  width: 1.13rem;
  margin: 0 0.1rem;
  background: url("./titile3-65d46b9a.png") center center/100% 100% no-repeat;
}
#makeInfo .qualityInfos {
  height: 5rem;
}
#makeInfo .qualityInfos .littleTitle {
  height: 0.45rem;
  background-color: rgb(0, 0, 0);
  margin-bottom: 0.05rem;
  color: #fff;
}
#makeInfo .qualityInfos .qualityInfo {
  width: 2.3rem;
  margin: 0 0.3rem;
}
#makeInfo .qualityInfos .qualityInfo .qualityInfoItem {
  background-color: rgb(214, 239, 243);
  margin-bottom: 0.05rem;
  height: 0.4rem;
  padding: 0 0.1rem;
}
#makeInfo .qualityInfos .qualityInfo .attriCoeInfoItem {
  background-color: rgb(214, 239, 243);
  padding: 0.1rem 0.1rem;
}
#makeInfo .qualityInfos .qualityText {
  width: 1.1rem;
}
#makeInfo .qualityInfos .qualityValue {
  text-align: right;
}
#makeInfo .needs {
  margin-bottom: 0.2rem;
  margin-top: 0.5rem;
  color: #000;
}
#makeInfo .lvlupBtn {
  width: 1.8rem;
  height: 0.55rem;
  box-shadow: 0 0 0.1rem #000;
}.equipmentInfo {
  width: 3.4rem;
  height: 9rem;
  background-color: #fff;
  margin: 0.05rem auto;
  color: #000;
  border: 0.1rem solid #000;
  box-sizing: content-box;
}
.equipmentInfo .equipmentInfoContent {
  height: 100%;
  padding: 0.1rem;
}
.equipmentInfo .equipmentInfoContent .equipText {
  font-size: 0.22rem;
  margin-left: 0.2rem;
}
.equipmentInfo .equipmentInfoHead {
  height: 0.8rem;
  font-size: 0.28rem;
  margin-bottom: 0.05rem;
  width: 3.1rem;
  color: #fff;
  padding-left: 0.1rem;
  background-color: #000;
}
.equipmentInfo .equipmentInfoHead .equipmentName {
  margin-bottom: 0.05rem;
}
.equipmentInfo .equipmentInfoHead .equipmentName .equipmentNamelvl {
  font-size: 0.22rem;
  margin-left: 0.1rem;
}
.equipmentInfo .equipmentInfoHead .equipmentIcon {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.2rem;
  font-size: 0.5rem;
  text-shadow: 0 0 0.1rem #000;
}
.equipmentInfo .attriTitle {
  width: 3rem;
  font-size: 0.26rem;
}
.equipmentInfo .attirTitleIcon {
  height: 0.2rem;
  background: url("./title2-d7ec949c.png") center center no-repeat;
  background-size: 100% 100%;
}
.equipmentInfo .equipmentInfoItem {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 0.2rem;
  width: 1.45rem;
  background-color: rgb(177, 221, 235);
  padding-left: 0.07rem;
  height: 0.38rem;
}
.equipmentInfo .equipmentInfoItem:last-child {
  margin-right: 0;
}
.equipmentInfo .mainValue {
  font-size: 0.32rem;
  color: #aa3815;
}
.equipmentInfo .mainValue2 {
  font-size: 0.28rem;
  color: #aa3815;
  margin-left: 0.1rem;
}
.equipmentInfo .mainName {
  margin-left: 0.05rem;
  margin-right: 0.1rem;
}
.equipmentInfo .mainAttriItem {
  margin: 0.05rem 0;
}
.equipmentInfo .attris {
  font-size: 0.26rem;
  margin: 0.05rem 0;
}
.equipmentInfo .attris.main {
  color: #f59663;
}
.equipmentInfo .attris.sub {
  color: #63b1f5;
}
.equipmentInfo .attris.sp {
  color: #8a1dc5;
  font-size: 0.24rem;
}
.equipmentInfo .attris.gemAttri {
  color: #4f5a07;
}
.equipmentInfo .attris.suitAttri {
  color: #e89a1c;
}
.equipmentInfo .attris.suitAttri .suitDesc {
  margin-left: 0.2rem;
  margin-top: 0.05rem;
  font-size: 0.22rem;
  color: #b6b6b6;
}
.equipmentInfo .attris.suitAttri .suitDesc .suitActive {
  color: #e89a1c;
}
.equipmentInfo .attris.suitAttri .suitDesc .suitActive .skillItem {
  color: #1c6792;
  border-bottom: 0.02rem solid #1c6792;
}
.equipmentInfo .attris.suitAttri .suitDesc .skillItem {
  color: #b6b6b6;
  border-bottom: 0.02rem solid #1c6792;
}
.equipmentInfo .attris .subAttri {
  margin: 0.08rem 0;
  font-size: 0.22rem;
}
.equipmentInfo .attriItem {
  margin-left: 0.2rem;
  font-size: 0.22rem;
  margin-top: 0.05rem;
}
.equipmentInfo .attriItem span {
  font-size: 0.2rem;
}
.equipmentInfo .suitName {
  font-size: 0.22rem;
  margin-top: 0.05rem;
  margin-left: 0.2rem;
}
.equipmentInfo .suitName span {
  font-size: 0.2rem;
}
.equipmentInfo .gemList {
  margin-top: 0.05rem;
  padding-left: 0.05rem;
}
.equipmentInfo .gemList .gem {
  font-size: 0.2rem;
  width: 2.8rem;
  height: 0.35rem;
  margin-right: 0.15rem;
  padding-left: 0.1rem;
  margin-bottom: 0.03rem;
  border: 0.02rem solid rgb(228, 228, 228);
}
.equipmentInfo .btns {
  height: 1.8rem;
}
.equipmentInfo .btn {
  width: 1.4rem;
  height: 0.5rem;
  margin-bottom: 0.2rem;
  background-color: #4e90ca;
  margin: 0.08rem 0.06rem;
  color: #000000;
  font-size: 0.24rem;
}#blessAttri .tips {
  color: rgb(77, 234, 161);
}
#blessAttri .totalLabel {
  background-color: #b8d2f1;
  border-radius: 0.1rem;
  padding: 0.1rem 0.2rem;
}
#blessAttri .needs {
  height: 2rem;
}
#blessAttri .blessBtn {
  border: 0.08rem solid rgba(0, 0, 0, .2);
  margin: 0.2rem auto 0;
  width: 2.9rem;
  height: 0.7rem;
  background-color: #eee;
  color: rgb(0, 0, 0);
}
#blessAttri .blessBtn.active {
  background-color: #6fa8ed;
}
#blessAttri .changeTip {
  margin-top: 0.1rem;
}
#blessAttri .btn {
  width: 1.9rem;
  height: 0.5rem;
  margin: 0.2rem;
  box-shadow: 0 0 0.1rem #70bfda;
}
#blessAttri .lookBtn {
  text-decoration: underline;
  color: rgb(79, 145, 210);
}
#blessAttri .lvlupBtn {
  width: 1.8rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem rgba(106, 167, 198, .6901960784);
  background-color: rgba(106, 167, 198, .6901960784);
}
#blessAttri .lvlupBtn .icon {
  font-size: 0.36rem;
}
#blessGetAttri {
  width: 7rem;
  height: 7rem;
}
#blessGetAttri .attriList {
  width: 6.8rem;
  margin: 0.1rem auto;
}
#blessGetAttri .attriList .item {
  width: 2rem;
  height: 0.75rem;
  color: #000;
  margin: 0.1rem 0.07rem;
  font-size: 0.22rem;
  background: #e4eef3;
  border: 0.08rem solid rgba(0, 0, 0, .2);
}#petAttriStar {
  width: 6.9rem;
  height: 10.9rem;
}
#petAttriStar .attriTitle {
  margin: 0 auto;
}
#petAttriStar .attriTitle .attriTitleIcon {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  background-size: 100% 100%;
}
#petAttriStar .titleTab {
  margin-top: 0.2rem;
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.3rem;
  border-bottom: 0.04rem solid #000000;
}
#petAttriStar .titleTab.active {
  background-color: #000000;
  color: #ffffff;
}
#petAttriStar .title {
  text-align: center;
}
#petAttriStar .attris {
  overflow: hidden;
  height: 6rem;
}
#petAttriStar .attris .attriItem {
  color: #ffffff;
  margin: 0.1rem;
  width: 2.8rem;
  border-radius: 0.05rem;
  height: 0.75rem;
  font-size: 0.24rem;
  background-color: #86cce8;
}
#petAttriStar .attris .attriItem .attriName {
  margin-bottom: 0.1rem;
}
#petAttriStar .attris .attriItem .attriValue {
  text-align: left;
}
#petAttriStar .attris .attriItem.active {
  background-color: rgb(172, 220, 246);
}
#petAttriStar .attris .attriItem .btn {
  width: 1rem;
  height: 0.4rem;
  box-shadow: 0 0 0.03rem #000;
}
#petAttriStar .attris .attriItem .btnlock {
  width: 1rem;
  height: 0.4rem;
  background-color: rgb(172, 220, 246);
}
#petAttriStar .attris .attriItem .btnlock.active {
  color: rgb(235, 29, 29);
}
#petAttriStar .needs {
  height: 1.2rem;
}
#petAttriStar .washBtn {
  width: 1.8rem;
  height: 0.55rem;
  box-shadow: 0 0 0.13rem rgb(248, 244, 244);
}.petInfo {
  width: 6.9rem;
  height: 8.3rem;
  color: #000;
}
.petInfo .petName {
  font-size: 0.32rem;
}
.petInfo .tips {
  padding-left: 0.3rem;
}
.petInfo .line {
  width: 5.1rem;
  height: 0.2rem;
  margin: 0.03rem auto;
  background: url("./line1-18bdc84e.png") center center/100% 100% no-repeat;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncA type="table" tableValues="0 0.5" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: opacity(0.5);
          filter: opacity(0.5);
}
.petInfo .petInfoContent {
  padding: 0.1rem;
}
.petInfo .petInfoContent .equipText {
  font-size: 0.22rem;
  margin-left: 0.2rem;
}
.petInfo .petInfoItem {
  border-radius: 0.08rem;
  margin: 0.05rem 0.05rem;
  background-color: rgb(138, 201, 233);
  font-size: 0.22rem;
  padding: 0.03rem 0.1rem;
  color: rgb(56, 54, 54);
}
.petInfo .attriTitle {
  margin: 0 auto;
}
.petInfo .attriTitle .attriTitleIcon {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  background-size: 100% 100%;
}
.petInfo .attris {
  overflow: hidden;
}
.petInfo .attris .attrisList {
  height: 3.9rem;
}
.petInfo .attris .attriItem {
  background-color: #83c7f5;
  color: #f8f8f8;
  margin: 0.1rem;
  width: 2.9rem;
  border-radius: 0.05rem;
  height: 0.55rem;
  font-size: 0.24rem;
}
.petInfo .attris .attriItem .attriName {
  padding-left: 0.1rem;
}
.petInfo .attris .attriItem .elementLabel {
  width: 0.35rem;
  height: 0.35rem;
  background-color: #4d7fd4;
  border-radius: 40%;
  margin-left: 0.05rem;
  font-size: 0.2rem;
}
.petInfo .attris .attriItem .attriValue {
  text-align: right;
  margin-right: 0.15rem;
}
.petInfo .attris .attriItem.active {
  background-color: rgb(172, 220, 246);
}
.petInfo .attris .otherAttriItem {
  border: 0.02rem solid #dee4e3;
  color: #374643;
  margin: 0.02rem 0;
  width: 1.65rem;
  border-radius: 0.05rem;
  height: 0.45rem;
  font-size: 0.2rem;
}
.petInfo .attris .otherAttriItem .attriName {
  padding-left: 0.1rem;
  width: 1rem;
}
.petInfo .attris .otherAttriItem .attriValue {
  text-align: center;
  min-width: 0.6rem;
}
.petInfo .attris .otherAttriItem.active {
  background-color: rgb(172, 220, 246);
}
.petInfo .attris .emptyattriItem {
  width: 1.7rem;
  height: 0.45rem;
  margin: 0.03rem 0;
}
.petInfo .attris .more {
  position: relative;
  background-color: #969c9b;
  color: #000;
}
.petInfo .attris .more::before {
  position: absolute;
  content: "";
  right: -0.12rem;
  top: -0.12rem;
  border-radius: 50%;
  background-color: red;
  width: 0.24rem;
  height: 0.24rem;
}
.petInfo .desc {
  font-size: 0.24rem;
  color: #333;
}
.petInfo .btns {
  margin-top: 0.05rem;
}
.petInfo .vbutton {
  width: 1.2rem;
}#petLearn {
  width: 6rem;
  height: 12rem;
  background: #fff;
}
#petLearn .title {
  color: #000;
  line-height: 0.7rem;
  font-size: 0.3rem;
}
#petLearn .titleIcon {
  height: 0.4rem;
  width: 1.13rem;
  margin: 0 0.1rem;
  background: url("./titile3-65d46b9a.png") center center/100% 100% no-repeat;
}
#petLearn .tips {
  margin: 0.1rem auto;
}
#petLearn .learnTip {
  font-size: 0.24rem;
  margin: 0.1rem auto;
}
#petLearn .learnTip .learnTipTitle {
  text-align: center;
}
#petLearn .learnTip .amountText {
  font-size: 0.22rem;
  width: 1.6rem;
}
#petLearn .skillItem {
  width: 5rem;
  margin: 0.15rem 0;
  border: 0.01rem solid #000;
  height: 0.8rem;
  padding: 0 0.15rem;
}
#petLearn .skillItem.active {
  background-color: #cde7ee;
}
#petLearn .skillName {
  width: 2rem;
}
#petLearn .skillNameText {
  padding: 0.1rem;
  background-color: #45d3fa;
  border-radius: 0.08rem;
}
#petLearn .learnBtn {
  width: 0.9rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000;
  margin-right: 0.1rem;
}
#petLearn .learnInfo {
  width: 5rem;
  height: 4rem;
  margin-top: 0.2rem;
  background-color: #cde7ee;
  padding: 0.2rem;
}
#petLearn .infoTip {
  font-size: 0.22rem;
  color: rgb(77, 234, 161);
}
#petLearn .needs {
  margin: 0.2rem 0;
  height: 1.2rem;
}
#petLearn .bookItem {
  width: 3rem;
  height: 0.7rem;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.15rem #666 inset;
}#replacePetBook {
  width: 5rem;
  min-height: 6rem;
}
#replacePetBook .list {
  margin-top: 0.2rem;
}
#replacePetBook .list .item {
  width: 4rem;
  margin-bottom: 0.15rem;
}
#replacePetBook .list .btn {
  width: 1rem;
  height: 0.45rem;
  background-color: #8ec3d2;
  color: #fff;
  box-shadow: 0 0 0.07rem #191919;
}
#replacePetBook .clearBtn {
  width: 2.2rem;
  height: 0.5rem;
  box-shadow: 0 0 0.07rem #191919;
  background-color: rgb(86, 146, 213);
  margin-top: 0.2rem;
}#pet .emptyPetItem {
  width: 3.2rem;
  height: 0.75rem;
  margin: 0.3rem auto;
  box-shadow: 0 0 0.1rem #595959 inset;
  border: 0.04rem dashed #5c6363;
}
#pet .emptyPetItem .icon {
  font-size: 0.5rem;
  color: #666;
}
#pet .petItem {
  margin: 0.3rem auto;
}
#pet .petInfo {
  margin-top: 0.1rem;
  box-shadow: 0 0 0 #fff;
  border: none;
}

.petSelectPos {
  width: 4rem;
  height: 3.6rem;
  background-color: #fff;
  color: #000;
  position: relative;
}
.petSelectPos .title {
  text-align: center;
  font-size: 0.3rem;
  line-height: 0.6rem;
}
.petSelectPos .list {
  overflow: auto;
}
.petSelectPos .item {
  color: #333;
  margin: 0.2rem auto;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  width: 90%;
  border-radius: 0.1rem;
  background: #ffffff;
  box-shadow: 0.07rem 0.07rem 0.13rem #cccccc, -0.07rem -0.07rem 0.13rem #ffffff;
}
.petSelectPos .bottom {
  height: 0.8rem;
}.petItem {
  width: 3.4rem;
  height: 0.75rem;
  margin: 0.05rem auto;
  position: relative;
  color: #fff;
}
.petItem .petItemContent {
  height: 100%;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(43, 41, 41, .462);
  background-color: rgb(212, 244, 248);
  position: relative;
}
.petItem .petIcon {
  width: 0.75rem;
  height: 100%;
  z-index: 0;
  font-size: 0.65rem;
  margin-right: 0.1rem;
  background-color: rgb(212, 244, 248);
  text-shadow: 0 0 0.04rem rgb(0, 0, 0), 0 0 0.08rem rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(43, 41, 41, .462);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 0.5rem 0.5rem;
}
.petItem .monsterImg {
  width: 0.6rem;
  height: 0.6rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
.petItem .gemList {
  position: absolute;
  top: 0.02rem;
  right: 0.05rem;
}
.petItem .gemList .gem {
  width: 0.45rem;
  height: 0.45rem;
  text-shadow: 0 0 0.05rem rgb(0, 0, 0), 0 0 0.1rem rgb(0, 0, 0);
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, .2823529412) inset;
}
.petItem .gemList .gem .n-itemIcon {
  font-size: 0.4rem;
}
.petItem .gemList .emptygem {
  width: 0.45rem;
  height: 0.45rem;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, .2823529412) inset;
}
.petItem .petImg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: 65% 65%;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(139,9,9,0.8)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem rgba(139, 9, 9, .8));
          filter: drop-shadow(0 0 0.1rem rgba(139, 9, 9, .8));
}
.petItem .element {
  position: relative;
  z-index: 1;
  font-size: 0.22rem;
  background-color: #54bcec;
  color: #000;
  margin-bottom: 0.08rem;
  padding: 0.02rem;
}
.petItem .strLvl {
  height: 0.24rem;
  font-size: 0.2rem;
  color: #2b44b3;
}
.petItem .new {
  height: 0.28rem;
  width: 0.28rem;
  font-size: 0.2rem;
  color: #333;
  color: rgb(216, 248, 37);
  background-color: #0da0d5;
  border-radius: 0.1rem;
  position: absolute;
  right: 0.05rem;
  top: 0.1rem;
}
.petItem .lock {
  height: 0.28rem;
  width: 0.28rem;
  font-size: 0.2rem;
  color: #333;
  color: rgb(255, 195, 166);
  background-color: #0da0d5;
  border-radius: 0.1rem;
  position: absolute;
  right: 0.05rem;
  top: 0.1rem;
}
.petItem .equipmnetName {
  position: relative;
  z-index: 1;
  margin: 0.05rem 0;
  font-size: 0.26rem;
  text-shadow: 0 0 0.1rem rgb(0, 0, 0);
  padding-left: 0.05rem;
  color: #202020;
  text-align: left;
}
.petItem .equipmnetSuitName {
  height: 0.24rem;
  font-size: 0.2rem;
  color: rgb(255, 255, 255);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 0.06rem rgb(0, 0, 0);
}
.petItem .label {
  width: 0.5rem;
  font-size: 0.18rem;
  margin: 0.02rem 0.02rem;
  color: #3e3e3e;
  background-color: #b7c4ec;
  border-radius: 0.05rem;
}
.petItem .lvllabel {
  font-size: 0.18rem;
  margin-left: 0.15rem;
}
.petItem .starlabel {
  font-size: 0.18rem;
  background-color: #84ff01;
  border-radius: 0.1rem;
  width: 0.8rem;
  height: 0.3rem;
  color: #000;
}
.petItem .powerlabel {
  width: 1.5rem;
  font-size: 0.18rem;
  margin: 0.02rem 0.02rem;
  color: #3e3e3e;
  padding: 0.03rem 0;
  background-color: #eda41c;
  border-radius: 0.05rem;
  padding-left: 0.2rem;
}
.petItem .elmentlabel {
  width: 0.3rem;
  height: 0.3rem;
  font-size: 0.18rem;
  margin: 0 0.01rem;
  color: #3e3e3e;
  background-color: #eda41c;
  border-radius: 50%;
}#replacePet {
  width: 7.4rem;
  height: 11rem;
}
#replacePet .tip {
  text-align: center;
}
#replacePet .list {
  height: 10rem;
  width: 7.2rem;
  overflow-x: hidden;
  overflow-y: auto;
}
#replacePet .list .petItem {
  margin: 0.05rem;
}.equipmentItem {
  width: 1.35rem;
  height: 1.35rem;
  position: relative;
  border: 0.04rem solid #fcfcfc;
  margin: 0.05rem auto 0.1rem;
  position: relative;
  padding: 0.05rem 0;
  color: #fff;
}
.equipmentItem.quality0 {
  background-color: #d6c9c9;
}
.equipmentItem.quality1 {
  background-color: #52d332;
}
.equipmentItem.quality2 {
  background-color: #5aa7f5;
}
.equipmentItem.quality3 {
  background-color: #1186fc;
}
.equipmentItem.quality4 {
  background-color: #085480;
}
.equipmentItem.quality5 {
  background-color: #194d6b;
}
.equipmentItem.quality6 {
  background-color: #e9fa00;
}
.equipmentItem.quality7 {
  background-color: #de0909;
}
.equipmentItem.quality8 {
  background-color: #c90d00;
}
.equipmentItem .equipmentItemContent {
  height: 100%;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(43, 41, 41, .462);
  background-color: rgb(212, 244, 248);
  position: relative;
}
.equipmentItem .equipmentIcon {
  width: 0.75rem;
  height: 100%;
  z-index: 0;
  font-size: 0.65rem;
  margin-right: 0.1rem;
  background-color: rgb(212, 244, 248);
  text-shadow: 0 0 0.04rem rgb(0, 0, 0), 0 0 0.08rem rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(43, 41, 41, .462);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 0.5rem 0.5rem;
}
.equipmentItem .equipmentImg {
  width: 0.6rem;
  height: 0.6rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
.equipmentItem .petImg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: 65% 65%;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(139,9,9,0.8)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem rgba(139, 9, 9, .8));
          filter: drop-shadow(0 0 0.1rem rgba(139, 9, 9, .8));
}
.equipmentItem .element {
  position: relative;
  z-index: 1;
  font-size: 0.22rem;
  background-color: #54bcec;
  color: #000;
  margin-bottom: 0.08rem;
  padding: 0.02rem;
}
.equipmentItem .strLvl {
  height: 0.24rem;
  font-size: 0.2rem;
  color: #2b44b3;
}
.equipmentItem .new {
  height: 0.3rem;
  width: 0.3rem;
  font-size: 0.2rem;
  color: rgb(216, 248, 37);
  background-color: #000000;
  position: absolute;
  left: 0.05rem;
  bottom: 0.05rem;
}
.equipmentItem .lock {
  height: 0.3rem;
  width: 0.3rem;
  font-size: 0.2rem;
  color: rgb(255, 12, 12);
  background-color: #000000;
  position: absolute;
  left: 0.05rem;
  bottom: 0.05rem;
}
.equipmentItem .equipmnetName {
  position: relative;
  z-index: 1;
  background-color: rgb(0, 0, 0);
  width: 1.2rem;
  font-size: 0.2rem;
  height: 0.3rem;
  color: #fff;
  margin-bottom: 0.05rem;
}
.equipmentItem .equipmnetSuitName {
  height: 0.24rem;
  font-size: 0.2rem;
  color: rgb(255, 255, 255);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 0.06rem rgb(0, 0, 0);
}
.equipmentItem .label {
  width: 0.6rem;
  font-size: 0.18rem;
  margin: 0.02rem 0.02rem;
  background-color: #c7e898;
  border-radius: 0.05rem;
  color: #000;
}
.equipmentItem .lvllabel {
  font-size: 0.18rem;
  margin-left: 0.05rem;
}
.equipmentItem .powerlabel {
  width: 1.2rem;
  font-size: 0.18rem;
  margin: 0.02rem 0.02rem;
  color: #09345f;
  padding: 0.03rem 0;
  background-color: #b7c4ec;
  border-radius: 0.05rem;
}#petAltar {
  width: 100%;
}
#petAltar .tips {
  padding-left: 0.2rem;
  color: rgb(77, 234, 161);
}
#petAltar .emptyPetItem {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.15rem;
  border: 0.04rem dashed #5c6363;
  position: relative;
}
#petAltar .equipmentItem {
  margin: 0.15rem;
}
#petAltar .lock {
  font-size: 0.4rem;
}
#petAltar .needs {
  margin: 1rem auto 0;
  padding-top: 0.3rem;
  width: 5.5rem;
  height: 4rem;
  border-radius: 0.15rem;
  background-color: rgb(214, 244, 243);
}
#petAltar .needs .lockTip {
  color: rgb(90, 140, 197);
}
#petAltar .needs .needContent {
  height: 2.2rem;
}
#petAltar .needs .lockBtn {
  width: 1.2rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000;
}#petBag {
  width: 100%;
}
#petBag .title {
  height: 0.6rem;
  font-size: 0.34rem;
}
#petBag .list {
  width: 7.3rem;
  height: 11rem;
  overflow: auto;
}
#petBag .petItem {
  margin: 0.05rem;
}
#petBag .handleBtns {
  margin: 0.1rem 0;
}
#petBag .bagSize {
  width: 2rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  color: #444;
  background-color: rgb(111, 202, 241);
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
#petBag .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#petBag .handleBtn.resolve {
  font-size: 0.2rem;
}#petMain .titleTab {
  margin-top: 0.2rem;
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.3rem;
  border-bottom: 0.04rem solid #000000;
}
#petMain .titleTab.active {
  background-color: #000000;
  color: #ffffff;
}#petSync {
  width: 100%;
}
#petSync .tips {
  margin: 0.2rem auto;
}
#petSync .petItemWrap {
  width: 3.2rem;
  height: 0.75rem;
  margin: 0.1rem 0.2rem;
  border: 0.04rem dashed #5c6363;
  position: relative;
  color: #fff;
  background-color: rgba(200, 231, 255, .5529411765);
}
#petSync .syncTip {
  text-align: center;
  font-size: 0.22rem;
  color: #43bddb;
  margin-bottom: 0.35rem;
  margin-top: 0.25rem;
}
#petSync .subPets .petItem {
  margin: 0 0.1rem;
}
#petSync .needs {
  height: 1.5rem;
}
#petSync .syncBtn {
  width: 1.5rem;
  height: 0.5rem;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 0.1rem #000;
}#petInherit {
  width: 100%;
}
#petInherit .tips {
  margin: 0.2rem auto;
}
#petInherit .petItemWrap {
  width: 3.2rem;
  height: 0.75rem;
  margin: 0.1rem 0.2rem;
  border: 0.04rem dashed #5c6363;
  position: relative;
  color: #fff;
  background-color: rgba(200, 231, 255, .5529411765);
}
#petInherit .syncTip {
  text-align: center;
  font-size: 0.22rem;
  color: #43bddb;
  margin-bottom: 0.35rem;
  margin-top: 0.25rem;
}
#petInherit .subPets .petItem {
  margin: 0 0.5rem;
}
#petInherit .inheritSelect {
  color: #fff;
  height: 0.6rem;
}
#petInherit .inheritSelect .selectBtn {
  width: 0.4rem;
  height: 0.4rem;
  border: 0.02rem solid #ffffff;
  margin-right: 0.1rem;
}
#petInherit .arrow {
  color: #fff;
  font-size: 0.34rem;
}
#petInherit .needs {
  height: 1.5rem;
}
#petInherit .syncBtn {
  width: 1.5rem;
  height: 0.5rem;
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 0.1rem #000;
}#petCall .list {
  width: 6.5rem;
  height: 6rem;
}
#petCall .petImg {
  width: 1rem;
  height: 1rem;
  margin: 0.1rem;
}
#petCall .petImg.active {
  background-color: #92cef6;
  box-shadow: 0 0 0.1rem #b0c4da;
}
#petCall .monsterImg {
  width: 0.8rem;
  height: 0.8rem;
}#libraryBag {
  width: 100%;
}
#libraryBag .list {
  height: 10rem;
  overflow: auto;
  padding: 0 0.15rem;
}
#libraryBag .handleBtns {
  margin: 0 0 0.1rem;
}
#libraryBag .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#libraryBag .handleBtn.resolve {
  font-size: 0.2rem;
}.bookItem {
  width: 2rem;
  height: 2rem;
  border: 0.01rem solid #000;
  margin: 0.1rem 0.15rem;
  border-radius: 0.12rem;
  background-color: #fff;
}
.bookItem .img {
  height: 1rem;
  width: 1rem;
}
.bookItem .skillBooks {
  margin-top: 0.1rem;
}
.bookItem .skillBooks .bookName {
  background-color: #9fe1e7;
  height: 0.3rem;
  padding: 0.05rem;
  border-radius: 0.05rem;
  font-size: 0.2rem;
  margin: 0 0.05rem;
}#libraryItemInfo {
  width: 7rem;
  height: 9.5rem;
  background-color: #fff;
  padding: 0.2rem;
}
#libraryItemInfo .title {
  font-size: 0.3rem;
  margin-bottom: 0.4rem;
}
#libraryItemInfo .skill {
  width: 6rem;
  margin: 0.2rem 0;
  padding: 0.2rem;
  height: 1.7rem;
  background-color: #cce6f5;
}
#libraryItemInfo .skill .skillName {
  margin-bottom: 0.05rem;
  font-size: 0.3rem;
  color: #265abb;
}#replacelibrary .bagList {
  width: 100%;
  height: 10rem;
  overflow: auto;
  padding: 0 0.15rem;
}#park .littleTitle {
  line-height: 0.8rem;
}
#park .list {
  width: 6.5rem;
  height: 4.3rem;
  overflow: auto;
}
#park .list .item {
  width: 5rem;
  height: 0.6rem;
  margin: 0.1rem;
  border: 0.02rem solid #1b72be;
}
#park .list .item.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
  color: #000;
}
#park .refreshBtn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .6901960784);
}
#park .desc {
  border: 0.04rem dashed #b8b8b8;
  width: 5.5rem;
  height: 1.8rem;
  margin: 0.1rem auto;
  padding-top: 0.1rem;
}
#park .desc .descContent {
  height: 1.2rem;
}
#park .desc .descBtn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(209, 209, 209, .6901960784);
}

.parkSelectPartner {
  width: 6rem;
  height: 7rem;
  background-color: #fff;
}
.parkSelectPartner .title {
  line-height: 0.8rem;
}
.parkSelectPartner .partnerList {
  height: 1.4rem;
}
.parkSelectPartner .partnerList .partnerItem {
  width: 1.2rem;
  height: 1.2rem;
  box-shadow: 0 0 0.1rem #000;
  font-size: 0.2rem;
  margin: 0.1rem 0.15rem;
  color: #000;
}
.parkSelectPartner .partnerList .partnerItem .partnerIcon {
  width: 0.8rem;
  height: 0.8rem;
}
.parkSelectPartner .partnerList .partnerItem.active {
  background-color: rgb(186, 186, 237);
}
.parkSelectPartner .descTitle {
  line-height: 0.8rem;
}
.parkSelectPartner .relationDesc {
  height: 2.2rem;
  width: 4rem;
  margin: 0.5rem auto;
  border: 0.01rem solid #000;
}
.parkSelectPartner .btn {
  box-shadow: 0 0 0.1rem #000;
  width: 1.5rem;
  height: 0.6rem;
}.parkRelation .item {
  width: 5rem;
  height: 1rem;
  border-bottom: 0.01rem solid #000;
}#equipments .equipmemtList {
  margin-top: 0;
  width: 7rem;
  position: relative;
}
#equipments .equipmemtList .equipmentItem {
  margin: 0 auto;
}
#equipments .equipmentItemWrap {
  position: relative;
  margin: 0.1rem 0.2rem;
}
#equipments .info {
  width: 1.1rem;
  height: 0.6rem;
}
#equipments .needs {
  margin-bottom: 0.1rem;
}
#equipments .needs .need {
  width: 1.3rem;
  font-size: 0.22rem;
  background-color: #828282;
}
#equipments .vbutton {
  margin: 0.15rem 0.2rem;
}
#equipments .btn {
  margin-top: 0.1rem;
  width: 1.7rem;
  height: 1rem;
  background-color: #51a8ca;
}
#equipments .btn .btnName {
  font-size: 0.22rem;
}
#equipments .setAddBtns {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
}
#equipments .setAddBtns .setAddBtn {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.2rem;
  border: 0.04rem solid #fff;
  margin: 0 0.1rem;
}
#equipments .setAddBtns .setAddBtn.active {
  background-color: #fff;
  color: #000;
}
#equipments .equipOne {
  position: absolute;
  left: 0.2rem;
  bottom: 0.2rem;
  width: 1.5rem;
  height: 0.5rem;
  background-color: #6293f5;
}.replaceEquipment {
  height: 11.5rem;
}
.replaceEquipment .list {
  width: 7rem;
  margin-left: 0.15rem;
  height: 9.5rem;
  overflow: auto;
}
.replaceEquipment .bagtabs {
  border-bottom: 0.01rem solid rgba(110, 204, 245, .291);
  width: 6.6rem;
  margin: 0 auto 0.1rem;
  padding-bottom: 0.05rem;
  box-sizing: border-box;
}
.replaceEquipment .bagtabs .labelTitle {
  width: 0.3rem;
  height: 0.8rem;
}
.replaceEquipment .bagtabs .bagtab {
  height: 0.7rem;
  text-align: center;
  margin: 0.15rem auto;
  padding: 0 0.05rem;
  color: #161515;
  border: 0.01rem solid #000000;
}
.replaceEquipment .bagtabs .bagtab.active {
  background-color: #73cdf7;
  color: #ffffff;
}
.replaceEquipment .bagtabs .mapTab {
  height: 0.4rem;
  min-width: 0.8rem;
  margin-right: 0.15rem;
}
.replaceEquipment .bagtabs .tabBtn {
  height: 0.4rem;
  width: 0.8rem;
  background-color: rgb(61, 150, 98);
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .5);
  color: #fff;
}
.replaceEquipment .handleBtns {
  margin: 0 0 0.1rem;
}
.replaceEquipment .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
.replaceEquipment .handleBtn.resolve {
  font-size: 0.2rem;
}
.replaceEquipment .bagSize {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(132, 206, 236);
  border-radius: 0.05rem;
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
.replaceEquipment .equipmentItemWrap {
  margin: 0.02rem 0.12rem;
}.inlayGem {
  min-width: 6rem;
  min-height: 7rem;
  position: relative;
}
.inlayGem .equipmentPart {
  padding: 0.05rem;
  background-color: #314a58;
  margin: 0.03rem;
  height: 1rem;
}
.inlayGem .equipmentPart.active {
  background-color: #1994e0;
}
.inlayGem .holes {
  height: 4.8rem;
}
.inlayGem .need {
  margin-bottom: 0.08rem;
}
.inlayGem .btn {
  width: 1.5rem;
  height: 0.5rem;
  background-color: #000000;
  box-shadow: 0 0 0.1rem rgba(22, 21, 21, .8);
  color: #fff;
}
.inlayGem .desc {
  width: 2.8rem;
  font-size: 0.24rem;
  color: rgb(255, 255, 255);
}
.inlayGem .gembtn {
  width: 1.2rem;
  height: 0.5rem;
  background-color: #355c93;
  box-shadow: 0 0 0.1rem rgba(38, 145, 191, .8);
  color: #fff;
}
.inlayGem .gemIcon {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.1rem;
  box-shadow: 0 0 0.12rem #000 inset;
  font-size: 0.6rem;
  text-shadow: 0 0 0.15rem rgba(0, 0, 0, .5);
}
.inlayGem .gemIcon .n-itemIcon {
  width: 0.6rem;
  height: 0.6rem;
  font-size: 0.6rem;
}
.inlayGem .gemItem {
  width: 5.2rem;
  height: 1rem;
  box-shadow: 0 0 0.12rem #ffffff inset;
  margin-bottom: 0.15rem;
}#replaceGem {
  width: 7rem;
  background-color: #000;
  height: 7rem;
}
#replaceGem .bagList {
  height: 6rem;
  overflow-y: auto;
  width: 100%;
  margin: 0 auto;
}
#replaceGem .bagItem {
  width: 3.1rem;
  font-size: 0.24rem;
  height: 0.55rem;
  padding: 0 0.1rem;
  background-color: rgb(194, 244, 231);
  margin: 0.1rem auto;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
}
#replaceGem .bagItem .n-itemIcon {
  margin: 0 0.1rem;
  font-size: 0.5rem;
}
#replaceGem .bagItem .itemName {
  width: 4.5rem;
  color: #272525;
}
#replaceGem .bagItem .value {
  text-align: right;
  color: #272525;
}
#replaceGem .bagItem.active {
  background-color: rgb(100, 196, 218);
}
#replaceGem .selectBtn {
  width: 1rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0.1rem rgb(34, 140, 202);
  font-size: 0.24rem;
}#equipmentBag .title {
  height: 0.6rem;
  font-size: 0.32rem;
}
#equipmentBag .list {
  width: 100%;
  height: 6rem;
  overflow: auto;
}
#equipmentBag .bagtabs {
  width: 6.6rem;
  margin: 0 auto 0.1rem;
  padding-bottom: 0.05rem;
  box-sizing: border-box;
}
#equipmentBag .bagtabs .labelTitle {
  width: 0.3rem;
  height: 0.8rem;
}
#equipmentBag .bagtabs .bagtab {
  height: 0.5rem;
  text-align: center;
  margin: 0 0.05rem;
  padding: 0 0.1rem;
  color: #a5c2fd;
  border: 0.01rem solid #a5c2fd;
}
#equipmentBag .bagtabs .bagtab.active {
  background-color: #73cdf7;
  color: #ffffff;
}
#equipmentBag .bagtabs .mapTab {
  height: 0.4rem;
  min-width: 0.8rem;
  margin-right: 0.15rem;
}
#equipmentBag .bagtabs .tabBtn {
  height: 0.4rem;
  width: 0.8rem;
  background-color: rgb(61, 150, 98);
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, .5);
  color: #fff;
}
#equipmentBag .handleBtns {
  margin: 0 0 0.1rem;
}
#equipmentBag .handleBtns .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#equipmentBag .handleBtns .handleBtn.resolve {
  font-size: 0.2rem;
}
#equipmentBag .bagSize {
  width: 2rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  color: #ffffff;
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
#equipmentBag .equipmentItemWrap {
  margin: 0.02rem 0.12rem;
}#talisman {
  width: 100%;
}
#talisman .list {
  width: 7.5rem;
  height: 6rem;
  overflow-y: auto;
  margin: 0.02rem 0.02rem;
  font-size: 0.23rem;
}
#talisman .list .talismanItem {
  height: 2.4rem;
  width: 2.3rem;
  margin: 0.1rem 0.1rem;
  border: 0.04rem solid #ffffff;
}
#talisman .list .talismanItem .talismanItem2 {
  width: 5.3rem;
  border: 0.04rem solid #ffffff;
  background-color: #f7ff03;
  color: #000;
}
#talisman .list .talismanItem .talismanItem2 .talismanName {
  margin: 0.02rem 0.02rem;
}
#talisman .list .talismanItem .talismanItem2 .talismanDesc {
  height: 1rem;
  width: 2rem;
  color: #000000;
}
#talisman .list .talismanItem .talismanItem2 .talismanDesc span {
  color: #429eee;
  font-size: 0.22rem;
}
#talisman .list .talismanItem .talismanItem2 .talismanBtn {
  background-color: #00ffd0;
  color: #000;
  width: 2.2rem;
}
#talisman .list .talismanItem .talismanItem2 .talismanBtn .btnName {
  margin-top: 0.1rem;
  height: 0.45rem;
  width: 2.2rem;
  background-color: #ff0101;
  color: #000000;
  font-size: 0.26rem;
}
#talisman .bagSize {
  width: 2rem;
  height: 0.22rem;
  color: #ffffff;
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
#talisman .handleBtns {
  width: 100%;
}
#talisman .handleBtns .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#talisman .handleBtns .handleBtn.resolve {
  font-size: 0.2rem;
}
#talisman .callBtn {
  width: 2rem;
  height: 0.6rem;
  background-color: #b5c6f9;
  margin: 0 0.2rem;
  color: #000;
}
#talisman .setAddBtns {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
}
#talisman .setAddBtns .setAddBtn {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.2rem;
  border: 0.04rem solid #fff;
  margin: 0 0.1rem;
}
#talisman .setAddBtns .setAddBtn.active {
  background-color: #fff;
  color: #000;
}.buildingMenu {
  width: 100%;
  position: relative;
  height: 7.3rem;
}
.buildingMenu .buildname {
  height: 0.4rem;
}
.buildingMenu .buildLvl {
  font-size: 0.22rem;
  margin-left: 0.1rem;
}
.buildingMenu .vbutton {
  width: 1.2rem;
  margin: 0 0.1rem;
}
.buildingMenu .buildingInfo {
  height: 0.3rem;
  font-size: 0.2rem;
}
.buildingMenu .needs {
  margin-top: 0.1rem;
}
.buildingMenu .needs .need {
  background-color: rgb(194, 244, 231);
  width: 1.4rem;
  padding: 0.05rem 0.05rem;
  color: #514b4b;
  font-size: 0.18rem;
}
.buildingMenu .buildingItem {
  width: 1.7rem;
  height: 1.6rem;
  font-size: 0.22rem;
  position: relative;
  border-radius: 0.1rem;
  margin: 0.06rem;
  background-color: hsl(213, 81%, 71%);
  padding: 0.02rem 0;
}
.buildingMenu .buildingItem.EquipmentCoe {
  width: 2.2rem;
}
.buildingMenu .buildingItem .name {
  font-size: 0.26rem;
  font-weight: bold;
  color: rgb(6, 72, 154);
}
.buildingMenu .buildingItem .lvl {
  margin-left: 0.1rem;
  font-size: 0.2rem;
}
.buildingMenu .buildingItem .buildAttri {
  margin-top: 0.1rem;
  font-size: 0.2rem;
}
.buildingMenu .buildingItem .buildAttri.equipmentCoe {
  font-size: 0.16rem;
}
.buildingMenu .buildingItem .lvlupBtn {
  width: 1.4rem;
  height: 0.32rem;
  font-size: 0.18rem;
  background-color: hsl(177, 78%, 81%);
  color: #666;
}
.buildingMenu .buildingItem:active {
  -webkit-transform: translateY(0.06rem);
          transform: translateY(0.06rem);
}
.buildingMenu .setAddBtns {
  position: absolute;
  right: 0.3rem;
  bottom: 1.1rem;
}
.buildingMenu .setAddBtns .setAddBtn {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.2rem;
  border: 0.04rem solid #fff;
  margin: 0 0.1rem;
}
.buildingMenu .setAddBtns .setAddBtn.active {
  background-color: #fff;
  color: #000;
}#schoolSkills {
  width: 100%;
}
#schoolSkills .list {
  padding: 0.1rem 0.04rem;
  height: 5.5rem;
  overflow: auto;
}
#schoolSkills .skillItem {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.1rem 0.1rem;
  color: #fff;
  font-size: 0.22rem;
}
#schoolSkills .skillItem .skillIcon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.6rem;
}
#schoolSkills .skillItem .skillIcon::before {
  position: absolute;
  content: "\ea7c";
  font-family: "iconfont";
  font-size: 0.9rem;
}
#schoolSkills .skillItem.active {
  background-color: #ffffff;
  color: #000;
}
#schoolSkills .skillAmount {
  color: #fff;
}
#schoolSkills .skillTabs {
  border: 0.05rem solid #3078c0;
  margin: 0.1rem;
  padding: 0.1rem;
  color: #fff;
}
#schoolSkills .skillTabs .skillTab {
  width: 2.5rem;
  height: 0.4rem;
}
#schoolSkills .skillTabs .skillTab.active {
  background-color: #3078c0;
}
#schoolSkills .skillTabs .skillTab span {
  font-size: 0.22rem;
  margin-left: 0.05rem;
}
#schoolSkills .descWrap {
  height: 2.1rem;
  margin: 0.2rem auto;
}
#schoolSkills .desc {
  width: 6.3rem;
  padding: 0.1rem;
  height: 2.2rem;
  background-color: #a2c8f7;
}
#schoolSkills .desc .skillName {
  margin-bottom: 0.1rem;
  font-size: 0.28rem;
  text-align: center;
  color: #000000;
}
#schoolSkills .desc .skillDesc {
  color: #406006;
  font-size: 0.24rem;
  height: 1rem;
}
#schoolSkills .resetSchoolSkills {
  width: 2rem;
  height: 0.55rem;
  box-shadow: 0 0 0.1rem #95b8f8;
}

.allSkills {
  width: 7.3rem;
  height: 11rem;
  background-color: #05362e;
}
.allSkills .list {
  padding: 0.1rem 0.04rem;
  height: 8rem;
  overflow: auto;
}
.allSkills .descWrap {
  height: 2.1rem;
  margin: 0.2rem auto;
}
.allSkills .skillItem {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.1rem 0.1rem;
  color: #fff;
  font-size: 0.22rem;
}
.allSkills .skillItem .skillIcon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.6rem;
}
.allSkills .skillItem .skillIcon::before {
  position: absolute;
  content: "\ea7c";
  font-family: "iconfont";
  font-size: 0.9rem;
}
.allSkills .skillItem.active {
  background-color: #ffffff;
  color: #000;
}
.allSkills .desc {
  width: 6.3rem;
  padding: 0.1rem;
  height: 2.2rem;
  background-color: #a2c8f7;
}
.allSkills .desc .skillName {
  margin-bottom: 0.1rem;
  font-size: 0.28rem;
  text-align: center;
  color: #000000;
}
.allSkills .desc .skillDesc {
  color: #406006;
  font-size: 0.24rem;
  height: 1rem;
}#studyMain .studyContent {
  height: 9.5rem;
}
#studyMain .lvlupBtn {
  width: 1.8rem;
  height: 0.6rem;
  box-shadow: 0 0 0.1rem rgba(106, 167, 198, .6901960784);
  background-color: rgba(106, 167, 198, .6901960784);
}
#studyMain .lvlupBtn .icon {
  font-size: 0.36rem;
}#studyComplete .completeItem {
  width: 2.8rem;
  height: 0.9rem;
  margin: 0.1rem;
  background-color: rgba(0, 255, 255, .7);
}
#studyComplete .completeItem.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
  color: #000;
}
#studyComplete .ingContent {
  height: 6.5rem;
}
#studyComplete .list {
  width: 6.5rem;
  height: 7.2rem;
  overflow: auto;
}
#studyComplete .info {
  background-color: #cbebf9;
  width: 5.5rem;
  height: 1.8rem;
  margin: 0.1rem auto;
  padding-top: 0.1rem;
}
#studyComplete .info .name {
  font-size: 0.3rem;
}
#studyComplete .info .desc {
  height: 0.6rem;
  margin-top: 0.2rem;
  color: #474512;
}
#studyComplete .info .needs {
  height: 1rem;
}
#studyComplete .refreshBtn {
  width: 1.7rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgb(255, 255, 255);
}
#studyComplete .btn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(209, 209, 209, .6901960784);
}#itemMake .list {
  height: 7.3rem;
  overflow-y: auto;
}
#itemMake .item {
  width: 2rem;
  height: 0.55rem;
  border: 0.02rem solid #b4acac;
  margin: 0.1rem;
}
#itemMake .item.active {
  background-color: rgb(95, 95, 95);
}
#itemMake .item .itemName {
  width: 1.4rem;
}
#itemMake .makeInfo {
  width: 5.5rem;
  height: 3rem;
  border: 0.04rem dashed #e2e2e2;
}
#itemMake .makeInfo .littleTitle {
  margin-top: 0.1rem;
}
#itemMake .makeInfo .needs {
  height: 1.8rem;
}
#itemMake .makeInfo .makeBtn {
  width: 1.4rem;
  height: 0.5rem;
  background-color: #6aa2f1;
  margin: 0 0.1rem;
}#arena {
  width: 100%;
}
#arena .list {
  height: 9rem;
  width: 100%;
  overflow: auto;
}
#arena .arenaBtn {
  width: 2rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  box-shadow: 0 0 0.1rem #fff;
}
#arena .myscore {
  color: #fff;
}
#arena .battleInfoItem {
  width: 100%;
  background-color: rgb(44, 158, 196);
  margin: 0.1rem 0;
  font-size: 0.22rem;
  color: #fff;
}
#arena .battleInfoItem .timeTd {
  width: 1rem;
}
#arena .battleInfoItem .btn {
  width: 1rem;
  height: 0.45rem;
  box-shadow: 0 0 0.1rem #000;
  background-color: rgb(7, 134, 176);
}
#arena .imgs {
  width: 2rem;
}
#arena .monsterImg {
  width: 0.45rem;
  height: 0.45rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
}
#arena .tipIcon {
  margin-left: 0.15rem;
  font-size: 0.32rem;
  color: #20c2f8;
}
#arena .arenaTimes {
  color: #fff;
}.arenaBattle {
  width: 100%;
  height: 10rem;
  background-color: rgba(2, 2, 2, .2);
  background-color: rgb(46, 196, 151);
  background-image: url("https://www.transparenttextures.com/patterns/dust.png");
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  padding-top: 0.5rem;
}
.arenaBattle.mapType3 {
  background-color: rgba(0, 0, 0, .8);
}
.arenaBattle.mapType3 .progress {
  background-color: rgb(255, 0, 0) !important;
}
.arenaBattle.mapType3 .progressBg {
  background-color: rgba(0, 0, 0, 0) !important;
}
.arenaBattle .battleTip {
  width: 100%;
  height: 100%;
  z-index: 20;
}
.arenaBattle .battleTip .battleTipContent {
  width: 4rem;
  padding: 0.1rem;
}
.arenaBattle .battleTip .battleTipText {
  padding: 0.2rem;
  font-size: 0.32rem;
  color: #000;
}
.arenaBattle .battleTip .closeBtn {
  margin-top: 0.3rem;
  width: 1.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000;
}
.arenaBattle .speed {
  margin-top: 0.15rem;
}
.arenaBattle .speed .speedBtn {
  width: 0.7rem;
  height: 0.7rem;
  box-shadow: 0 0 0.1rem #fffcfc;
  margin: 0.1rem;
}
.arenaBattle .speed .speedBtn.active {
  background-color: #000;
}#selectOpponent {
  width: 6.8rem;
  height: 8rem;
  position: relative;
}
#selectOpponent .opponents {
  width: 100%;
  height: 7rem;
}
#selectOpponent .btn {
  height: 0.7rem;
  width: 2rem;
  margin: 0.2rem auto 0;
  background-color: #e91414;
  border-bottom: 0.06rem solid rgba(0, 0, 0, .1);
  border-top: 0.06rem solid rgba(0, 0, 0, .1);
}
#selectOpponent .item {
  width: 100%;
  height: 1.8rem;
  background-color: rgba(62, 138, 151, .7);
  margin: 0.1rem 0;
  padding: 0.1rem;
}
#selectOpponent .item .info {
  height: 0.6rem;
  font-size: 0.24rem;
}
#selectOpponent .monsterImg {
  width: 0.75rem;
  height: 0.75rem;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 0.1rem #000);
          filter: drop-shadow(0 0 0.1rem #000);
  margin-bottom: 0.1rem;
}
#selectOpponent .monsterIcon {
  font-size: 0.5rem;
}
#selectOpponent .battleBtn {
  height: 0.5rem;
  width: 1rem;
  background-color: #be2a2a;
  box-shadow: 0 0 0.1rem #000;
}
#selectOpponent .bottom {
  position: absolute;
  top: 100%;
  width: 100%;
  margin-top: 0.2rem;
}#sacrifice .item {
  width: 5rem;
  height: 0.7rem;
  margin: 0.2rem;
  border: 0.12rem double rgb(161, 187, 213);
  background-color: rgba(78, 233, 233, .774);
}
#sacrifice .item.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
  color: #000;
}
#sacrifice .label {
  color: #fff;
}
#sacrifice .completeItem {
  width: 2.8rem;
  height: 0.6rem;
  margin: 0.1rem;
  border: 0.02rem solid #000;
}
#sacrifice .completeItem.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
}
#sacrifice .ingContent {
  height: 8.5rem;
}
#sacrifice .list {
  width: 6.5rem;
  height: 6.2rem;
  overflow: auto;
}
#sacrifice .info {
  width: 6rem;
  height: 2.2rem;
  margin: 0.1rem auto;
  padding: 0.1rem;
  background-color: #cbebf9;
  color: #333;
}
#sacrifice .info .name {
  font-size: 0.3rem;
}
#sacrifice .info .desc {
  height: 0.9rem;
  color: #474512;
  margin-top: 0.1rem;
  font-size: 0.24rem;
}
#sacrifice .info .needs {
  height: 1rem;
}
#sacrifice .refreshBtn {
  width: 2.2rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  box-shadow: 0 0 0.1rem rgb(37, 33, 33);
  background-color: rgba(114, 173, 229, .8117647059);
}
#sacrifice .btn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(209, 209, 209, .6901960784);
}#sacrificeComplete .completeItem {
  width: 2.8rem;
  height: 0.9rem;
  margin: 0.1rem;
  background-color: rgba(0, 255, 255, .7);
}
#sacrificeComplete .completeItem.active {
  background-color: aqua;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .431372549);
  color: #000;
}
#sacrificeComplete .ingContent {
  height: 6.5rem;
}
#sacrificeComplete .list {
  width: 6.5rem;
  height: 7.2rem;
  overflow: auto;
}
#sacrificeComplete .info {
  background-color: #cbebf9;
  width: 5.5rem;
  height: 1.8rem;
  margin: 0.1rem auto;
  padding-top: 0.1rem;
}
#sacrificeComplete .info .name {
  font-size: 0.3rem;
}
#sacrificeComplete .info .desc {
  height: 0.6rem;
  margin-top: 0.2rem;
  color: #474512;
}
#sacrificeComplete .info .needs {
  height: 1rem;
}
#sacrificeComplete .refreshBtn {
  width: 1.7rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgb(255, 255, 255);
}
#sacrificeComplete .btn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem rgba(209, 209, 209, .6901960784);
}#skillBookMain {
  width: 100%;
  height: 100%;
}#skillList .skillItem {
  width: 1.8rem;
  margin: 0.07rem 0.2rem;
  height: 0.8rem;
  border: 0.04rem dashed #000000;
  font-size: 0.2rem;
}
#skillList .skillItem .skillIcon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.6rem;
}
#skillList .skillItem .skillIcon::before {
  position: absolute;
  content: "\ea7c";
  font-family: "iconfont";
  font-size: 0.9rem;
}
#skillList .skillItem .lockIcon {
  font-size: 0.5rem;
  color: #999;
}
#skillList .skillItem .skillName {
  margin-bottom: 0.05rem;
  font-size: 0.24rem;
}
#skillList .skillItem.active {
  box-shadow: 0 0 0.1rem rgba(95, 165, 197, .5960784314);
  background-color: rgba(164, 214, 243, .26);
}
#skillList .info {
  width: 1.1rem;
  height: 0.6rem;
}
#skillList .maxLvl {
  height: 0.8rem;
  width: 2.4rem;
  color: #ef3f3f;
}
#skillList .skillWrap {
  height: 3.3rem;
}
#skillList .skillInfo {
  width: 6.4rem;
  margin: 0.1rem 0;
  padding: 0.15rem;
  height: 3rem;
  background-color: rgb(164, 214, 243);
  font-size: 0.22rem;
}
#skillList .skillInfo .skillIcon {
  width: 1rem;
  height: 100%;
  font-size: 0.7rem;
}
#skillList .skillInfo .skillName {
  margin-bottom: 0.15rem;
  font-size: 0.3rem;
  color: #000;
}
#skillList .skillInfo .skillContent {
  height: 100%;
}
#skillList .skillInfo .skillDesc {
  height: 1.1rem;
  color: #063e5c;
}
#skillList .skillInfo .needPoint {
  color: #063e5c;
  height: 0.3rem;
}
#skillList .arrow4 {
  width: 0.4rem;
  height: 0.28rem;
  background: url("./arrow4-c6e6729d.png") center center/0.4rem 0.28rem no-repeat;
}
#skillList .skillPoint {
  height: 0.3rem;
  margin-bottom: 0.1rem;
  color: #fff;
}
#skillList .learnBtn {
  width: 2rem;
  height: 0.6rem;
  background-color: #5b7582;
  position: relative;
  font-size: 0.22rem;
}
#skillList .learnBtn::before {
  content: "";
  position: absolute;
  width: calc(100% - 0.15rem);
  height: calc(100% - 0.15rem);
  border: 0.04rem dashed #a0bfe0;
}
#skillList .lvlupSkill {
  width: 1.5rem;
  height: 0.55rem;
  background-color: #5fa5c5;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
}
#skillList .forgetBtn {
  width: 1.5rem;
  height: 0.55rem;
  background-color: #5fa5c5;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .5);
}
#skillList .resetBtn {
  width: 1.5rem;
  height: 0.55rem;
  background-color: #5fa5c5;
}#schoolLearn {
  height: 10rem;
}
#schoolLearn .skills {
  height: 5rem;
}
#schoolLearn .skillItem {
  width: 2.5rem;
  height: 0.7rem;
  margin: 0.2rem;
  border: 0.04rem solid #98d0f0;
}
#schoolLearn .skillItem.active {
  background-color: #95b8f8;
}
#schoolLearn .info {
  width: 6rem;
  margin: 0.2rem auto;
  padding: 0.2rem;
  height: 3rem;
  border: 0.04rem solid #cce6f5;
}
#schoolLearn .info .skillName {
  margin-bottom: 0.05rem;
  font-size: 0.3rem;
  color: #95b8f8;
}
#schoolLearn .info .skillDesc {
  height: 1.6rem;
}
#schoolLearn .info .forgetBtn {
  width: 1.8rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #98d0f0;
}
#schoolLearn .info .needs {
  height: 1rem;
}

.learnSkill {
  width: 7rem;
  height: 10rem;
  background-color: #05362e;
  padding: 0.1rem 0;
}
.learnSkill .list {
  padding: 0.1rem 0.04rem;
  height: 6rem;
}
.learnSkill .skillItem {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.1rem 0.1rem;
  color: #fff;
  font-size: 0.22rem;
}
.learnSkill .skillItem .skillIcon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  font-size: 0.6rem;
}
.learnSkill .skillItem .skillIcon::before {
  position: absolute;
  content: "\ea7c";
  font-family: "iconfont";
  font-size: 0.9rem;
}
.learnSkill .skillItem.active {
  background-color: #ffffff;
  color: #000;
}
.learnSkill .desc {
  width: 6rem;
  padding: 0.1rem;
  height: 2.5rem;
  background-color: #a2c8f7;
}
.learnSkill .desc .skillName {
  margin-bottom: 0.1rem;
  font-size: 0.28rem;
  text-align: center;
  color: #000000;
}
.learnSkill .desc .skillDesc {
  height: 1.2rem;
  color: #406006;
  font-size: 0.24rem;
}#skillBookCall {
  width: 7.3rem;
  height: 10rem;
  background-color: #fff;
}
#skillBookCall .list {
  height: 8rem;
}
#skillBookCall .callBtn {
  width: 1.4rem;
  height: 0.6rem;
  background-color: #b5c6f9;
}.skillIBookItem {
  width: 1.8rem;
  margin: 0.1rem 0.12rem;
  height: 0.8rem;
  border: 0.04rem solid #ffffff;
  color: #fff;
  position: relative;
  font-size: 0.22rem;
}
.skillIBookItem.quality0 {
  background-color: #d6c9c9;
}
.skillIBookItem.quality0 {
  background-color: #52d332;
}
.skillIBookItem.quality1 {
  background-color: #5aa7f5;
}
.skillIBookItem.quality2 {
  background-color: #1186fc;
}
.skillIBookItem.quality4 {
  background-color: #085480;
}
.skillIBookItem.quality5 {
  background-color: #194d6b;
}
.skillIBookItem.quality6 {
  background-color: #e9fa00;
}
.skillIBookItem.quality7 {
  background-color: #de0909;
}
.skillIBookItem.quality8 {
  background-color: #c90d00;
}
.skillIBookItem .aSkillList {
  width: 100%;
  height: 0.3rem;
}
.skillIBookItem .aSkillItem {
  font-size: 0.17rem;
  height: 0.3rem;
  width: 0.6rem;
  margin: 0 0.02rem;
  background-color: #1690d7;
}
.skillIBookItem .aSkillItem:nth-child(1) {
  top: 0;
  left: 0;
}
.skillIBookItem .aSkillItem:nth-child(2) {
  top: 0;
  right: 0;
}
.skillIBookItem .aSkillItem:nth-child(3) {
  bottom: 0;
  left: 0;
}
.skillIBookItem .aSkillItem:nth-child(4) {
  bottom: 0;
  right: 0;
}
.skillIBookItem .lock {
  height: 0.3rem;
  width: 0.3rem;
  font-size: 0.2rem;
  color: rgb(255, 12, 12);
  background-color: #ffffff;
  position: absolute;
  left: -0.1rem;
  top: -0.1rem;
}
.skillIBookItem .skillName {
  background-color: rgb(0, 0, 0);
  width: 1.5rem;
}.replaceSkillBook {
  width: 7.5rem;
  height: 9rem;
  padding: 0.2rem 0;
  border: 0.04rem solid #fff;
  background-color: #000000;
}
.replaceSkillBook .list {
  height: 8.5rem;
  overflow: auto;
}
.replaceSkillBook .skillIBookItem {
  margin: 0.03rem 0.02rem;
}.skillInfo {
  width: 7.2rem;
  height: 8rem;
  background-color: #fff;
  padding: 0.2rem;
}
.skillInfo .list {
  width: 6.5rem;
}
.skillInfo .skillCd {
  margin-bottom: 0.5rem;
}
.skillInfo .skillDesc {
  width: 6.5rem;
  color: #888610;
  margin-bottom: 0.3rem;
}
.skillInfo .skillDesc span {
  color: #429eee;
  font-size: 0.22rem;
}
.skillInfo .label {
  width: 6.5rem;
  margin-bottom: 0.1rem;
}
.skillInfo .btn {
  width: 1.6rem;
  height: 0.5rem;
  background-color: #131313;
  color: #fff;
}.skillBookBag {
  width: 100%;
}
.skillBookBag .skillIBookItem {
  margin: 0.03rem 0.03rem;
}
.skillBookBag .list {
  width: 7.5rem;
  height: 5rem;
  margin-bottom: 0.1rem;
  overflow-y: auto;
}
.skillBookBag .need {
  margin-bottom: 0.1rem;
}
.skillBookBag .bagSize {
  width: 2rem;
  height: 0.42rem;
  margin-right: 0.2rem;
  color: #ffffff;
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
.skillBookBag .handleBtns {
  width: 100%;
  margin: 0 0 0.1rem;
}
.skillBookBag .handleBtns .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
.skillBookBag .handleBtns .handleBtn.resolve {
  font-size: 0.2rem;
}
.skillBookBag .callBtn {
  width: 2rem;
  height: 0.6rem;
  background-color: #b5c6f9;
  margin: 0 0.2rem;
  color: #000;
}#skillBookUp {
  width: 100%;
}
#skillBookUp .list {
  width: 7.5rem;
  height: 6rem;
  overflow-y: auto;
  margin: 0.02rem 0.02rem;
  font-size: 0.23rem;
}
#skillBookUp .list .skillBookItem {
  height: 1.6rem;
  width: 7.5rem;
  margin: 0.1rem 0.1rem;
}
#skillBookUp .list .skillBookItem .skillBookItem2 {
  width: 5.3rem;
  border: 0.04rem solid #ffffff;
  background-color: #fef200;
  color: #000;
}
#skillBookUp .list .skillBookItem .skillBookItem2 .skilllBookName {
  margin: 0.02rem 0.02rem;
}
#skillBookUp .list .skillBookItem .skillBookItem2 .skilllBookDesc {
  width: 5rem;
  color: #000000;
}
#skillBookUp .list .skillBookItem .skillBookItem2 .skilllBookDesc span {
  color: #429eee;
  font-size: 0.22rem;
}
#skillBookUp .list .skillBookItem .skillBookItem2 .skilllBookCd {
  margin: 0.02rem 0.02rem;
}
#skillBookUp .list .skillBookItem .btn {
  background-color: #00ffd0;
  color: #000;
  width: 2rem;
  border: 0.04rem solid #ffffff;
}
#skillBookUp .list .skillBookItem .btn .btnName {
  margin-top: 0.1rem;
  height: 0.45rem;
  width: 1.5rem;
  background-color: #3700ff;
  color: #ffffff;
  font-size: 0.26rem;
}
#skillBookUp .bagSize {
  width: 2rem;
  height: 0.22rem;
  color: #ffffff;
  border-radius: 0.2rem;
  font-size: 0.24rem;
}
#skillBookUp .handleBtns {
  width: 100%;
}
#skillBookUp .handleBtns .handleBtn {
  width: 1.3rem;
  height: 0.42rem;
  color: #fff;
  background-color: rgb(90, 78, 78);
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, .3);
  margin-right: 0.2rem;
  font-size: 0.24rem;
}
#skillBookUp .handleBtns .handleBtn.resolve {
  font-size: 0.2rem;
}
#skillBookUp .callBtn {
  width: 2rem;
  height: 0.6rem;
  background-color: #b5c6f9;
  margin: 0 0.2rem;
  color: #000;
}
#skillBookUp .setAddBtns {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
}
#skillBookUp .setAddBtns .setAddBtn {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.2rem;
  border: 0.04rem solid #fff;
  margin: 0 0.1rem;
}
#skillBookUp .setAddBtns .setAddBtn.active {
  background-color: #fff;
  color: #000;
}#treasure .treasureItem {
  width: 1.8rem;
  height: 1.5rem;
  margin: 0.03rem;
  background-color: #5c86ea;
}
#treasure .treasureItem .treasureName {
  margin: 0.05rem 0;
}
#treasure .treasureItem .need {
  background-color: #cdfff1;
  color: #000;
  width: 1.6rem;
  height: 0.3rem;
  font-size: 0.22rem;
  margin: 0.04rem 0;
}.treasureSet {
  width: 7rem;
  height: 5rem;
  background-color: #fff;
}
.treasureSet .title {
  line-height: 0.8rem;
}
.treasureSet .attris {
  height: 1rem;
}
.treasureSet .need {
  height: 0.6rem;
  width: 2rem;
  background-color: #cdfff1;
  margin: 0.15rem 0;
}
.treasureSet .putBtn {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.15rem;
  background-color: #b9deff;
}
.treasureSet .hasAmount {
  margin-left: 0.1rem;
}.treasureItem .list {
  height: 3rem;
}
.treasureItem .list .elementItem {
  height: 0.5rem;
  width: 2.2rem;
}
.treasureItem .btn {
  height: 0.45rem;
  width: 2rem;
  background-color: #70d35f;
}#talent {
  width: 100%;
}
#talent .lineTitle {
  font-size: 0.2rem;
}
#talent .node {
  width: 1.4rem;
  height: 0.55rem;
  margin: 0.06rem 0.03rem;
  font-size: 0.18rem;
  background-color: #2ec6ac;
  border-radius: 0.1rem;
}
#talent .node .nodeLvl {
  background-color: #fff;
  margin-top: 0.05rem;
  width: 0.7rem;
  color: #000;
}
#talent .line {
  opacity: 0.6;
}
#talent .active {
  opacity: 1;
}
#talent .active1 {
  opacity: 1;
}
#talent .active1 .node {
  border: 0.01rem solid #616161;
}
#talent .talentLvl,
#talent .talentPoint {
  font-size: 0.22rem;
  margin: 0 0.1rem;
  height: 0.35rem;
}
#talent .btn {
  width: 1.6rem;
  height: 0.45rem;
  background-color: #52a0f9;
}
#talent .useBtn {
  width: 1.2rem;
  height: 0.35rem;
  background-color: #e2f324;
  color: #000;
}
#talent .useText {
  width: 1.2rem;
  height: 0.35rem;
}#pratice .tip {
  color: #60f579;
  font-size: 0.2rem;
}
#pratice .lvl {
  color: #fff;
}
#pratice .attriItem {
  background-color: #3185d4;
  border-radius: 0.1rem;
  margin: 0.05rem;
  height: 0.6rem;
  width: 7.2rem;
  padding: 0 0.15rem;
  color: #edfdff;
  font-size: 0.22rem;
}
#pratice .attriItem .attriItemName {
  width: 1.4rem;
}
#pratice .attriItem .attriItemBaseAttri {
  width: 1.8rem;
}
#pratice .need {
  font-size: 0.2rem;
}
#pratice .btn {
  height: 0.45rem;
  width: 2rem;
  background-color: #3db8da;
}#practiceLinGen {
  width: 7rem;
  height: 6.7rem;
}
#practiceLinGen .linGenattris {
  width: 5.8rem;
}
#practiceLinGen .linGenattris .linGenattriItem {
  width: 2.6rem;
  margin: 0.1rem;
  background-color: rgba(117, 110, 110, .5490196078);
  padding: 0.1rem;
}
#practiceLinGen .linGenattris .linGenattriItem .attriValue {
  width: 1rem;
}#jingjieAttri {
  width: 7rem;
  height: 12rem;
}
#jingjieAttri .list {
  height: 10.7rem;
  overflow: auto;
}
#jingjieAttri .attriTitle {
  margin: 0.1rem auto;
}
#jingjieAttri .attriTitle span {
  font-size: 0.2rem;
}
#jingjieAttri .attriTitle .attriTitleIcon {
  width: 2.08rem;
  height: 0.25rem;
  background: url("./title2-d7ec949c.png") no-repeat center center;
  background-size: 100% 100%;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0" /><feFuncG type="table" tableValues="1 0" /><feFuncB type="table" tableValues="1 0" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: invert(100%);
          filter: invert(100%);
}
#jingjieAttri .attris {
  font-size: 0.2rem;
  background-color: rgba(90, 90, 90, .4823529412);
  padding: 0.1rem 0;
}
#jingjieAttri .attris .attriItem {
  width: 1.5rem;
  margin: 0.05rem 0;
}.lingGenWash {
  width: 5rem;
  height: 11rem;
}
.lingGenWash .attriItem {
  color: #292929;
  margin: 0.1rem 0;
  width: 3rem;
  border-radius: 0.05rem;
  height: 0.9rem;
  font-size: 0.24rem;
  padding-left: 0.2rem;
  background-color: #cff6ec;
}
.lingGenWash .attriItem .attriName {
  width: 1.5rem;
}
.lingGenWash .attriItem .attriValue {
  text-align: left;
}
.lingGenWash .attriItem.active {
  background-color: rgb(172, 220, 246);
}
.lingGenWash .attriItem .btn {
  width: 1rem;
  height: 0.7rem;
  box-shadow: 0 0 0.1rem rgba(52, 48, 48, .5);
  background-color: #67e7e0;
  font-size: 0.22rem;
  color: #fff8f8;
  border-radius: 0.15rem;
}
.lingGenWash .attriItem .lock {
  width: 0.8rem;
  font-size: 0.34rem;
}
.lingGenWash .attriItem .lock.active {
  color: red;
}
.lingGenWash .needs {
  margin: 0.2rem auto;
}.offlineData {
  width: 6.3rem;
  height: 3.5rem;
  background-color: #fff;
  padding: 0.2rem;
}
.offlineData .offlineTime {
  margin-bottom: 0.2rem;
  font-size: 0.24rem;
}
.offlineData .btns {
  width: 5.2rem;
  margin: 0.1rem auto;
  padding: 0.15rem;
  border: 0.04rem solid #464646;
}
.offlineData .btn {
  width: 1.3rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000000;
  margin: 0.1rem;
}
.offlineData .lines {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 0.7rem;
  z-index: 0;
}
.offlineData .lines .line {
  width: 5.3rem;
  height: 0.6rem;
}
.offlineData .eitems {
  margin-top: 0.1rem;
  width: 5.4rem;
  padding-left: 0.1rem;
  background-color: rgb(13, 74, 101);
  border-radius: 0.15rem;
  color: #fff;
}
.offlineData .items {
  width: 5.4rem;
  background-color: rgb(13, 74, 101);
  border-radius: 0.15rem;
  color: #fff;
}
.offlineData .item {
  font-size: 0.22rem;
  height: 0.5rem;
  width: 1.8rem;
  padding-left: 0.1rem;
}
.offlineData .eitemTitle {
  font-size: 0.2rem;
  height: 0.4rem;
  width: 4rem;
}
.offlineData .eItem {
  font-size: 0.2rem;
  height: 0.35rem;
  width: 1.6rem;
  margin: 0 0.05rem;
}
.offlineData .eitemTip {
  font-size: 0.2rem;
  color: #adf510;
}.updateVersion {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
}
.updateVersion .content {
  border-radius: 0.5rem;
  width: 4rem;
  height: 2rem;
  box-shadow: 0 0 0.1rem #000;
  background-color: #202020;
}
.updateVersion .content .btn {
  width: 2.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0.1rem #000;
  background-color: #3e95c7;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
}#privacy {
  width: 6.5rem;
  height: 8.5rem;
  background-color: #fff;
  border: 0.03rem solid #000;
  color: #000;
}
#privacy .title {
  font-size: 0.3rem;
  line-height: 0.7rem;
}
#privacy .content {
  overflow: auto;
  width: 90%;
  height: 11rem;
}
#privacy .btn {
  margin-top: 0.3rem;
  background-color: #99aae8;
  width: 1.5rem;
  height: 0.5rem;
  color: #fff;
}
#privacy .btns {
  width: 100%;
}